diff --git a/archives/2021/11/index.html b/archives/2021/11/index.html
index 7e16513e..48048ce8 100644
--- a/archives/2021/11/index.html
+++ b/archives/2021/11/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十一月 2021</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 3</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4c664111.html" title="PhotoShop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_13.webp" alt="PhotoShop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></div><a class="article-sort-item-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十一月 2021</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 3</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4c664111.html" title="PhotoShop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_13.webp" alt="PhotoShop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></div><a class="article-sort-item-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2021/12/index.html b/archives/2021/12/index.html
index c1946f20..149502e9 100644
--- a/archives/2021/12/index.html
+++ b/archives/2021/12/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十二月 2021</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 2</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十二月 2021</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 2</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2021/index.html b/archives/2021/index.html
index 5795b978..87da851b 100644
--- a/archives/2021/index.html
+++ b/archives/2021/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2021</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 5</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4c664111.html" title="PhotoShop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_13.webp" alt="PhotoShop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></div><a class="article-sort-item-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2021</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 5</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4c664111.html" title="PhotoShop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_13.webp" alt="PhotoShop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></div><a class="article-sort-item-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/01/index.html b/archives/2022/01/index.html
index dc3a31f0..8ffde1e7 100644
--- a/archives/2022/01/index.html
+++ b/archives/2022/01/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">一月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 3</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">一月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 3</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/02/index.html b/archives/2022/02/index.html
index 8c590940..c7994e87 100644
--- a/archives/2022/02/index.html
+++ b/archives/2022/02/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">二月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 9</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">二月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 9</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/03/index.html b/archives/2022/03/index.html
index 97d372f3..72f552ac 100644
--- a/archives/2022/03/index.html
+++ b/archives/2022/03/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">三月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 11</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3a42db2d.html" title="Vue3"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_20.webp" alt="Vue3" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></div><a class="article-sort-item-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/facd74f4.html" title="Echarts"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_2.webp" alt="Echarts" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></div><a class="article-sort-item-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/archives/2022/03/page/2/">2</a><a class="extend next" rel="next" href="/archives/2022/03/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">三月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 11</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3a42db2d.html" title="Vue3"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_20.webp" alt="Vue3" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></div><a class="article-sort-item-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/facd74f4.html" title="Echarts"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_2.webp" alt="Echarts" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></div><a class="article-sort-item-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/archives/2022/03/page/2/">2</a><a class="extend next" rel="next" href="/archives/2022/03/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/03/page/2/index.html b/archives/2022/03/page/2/index.html
index 6d44999f..f07b5209 100644
--- a/archives/2022/03/page/2/index.html
+++ b/archives/2022/03/page/2/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">三月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 11</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/2022/03/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/2022/03/">1</a><span class="page-number current">2</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">三月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 11</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/2022/03/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/2022/03/">1</a><span class="page-number current">2</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/04/index.html b/archives/2022/04/index.html
index 9dc7e84b..00a2a96c 100644
--- a/archives/2022/04/index.html
+++ b/archives/2022/04/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">四月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 2</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">四月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 2</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/05/index.html b/archives/2022/05/index.html
index b561b663..aa725293 100644
--- a/archives/2022/05/index.html
+++ b/archives/2022/05/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">五月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">五月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/06/index.html b/archives/2022/06/index.html
index 18d5cabf..1fab0c4c 100644
--- a/archives/2022/06/index.html
+++ b/archives/2022/06/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">六月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">六月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/08/index.html b/archives/2022/08/index.html
index b96a4671..0ac4e80b 100644
--- a/archives/2022/08/index.html
+++ b/archives/2022/08/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">八月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">八月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/10/index.html b/archives/2022/10/index.html
index 5f11fe20..fde9f2b2 100644
--- a/archives/2022/10/index.html
+++ b/archives/2022/10/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 2</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 2</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/11/index.html b/archives/2022/11/index.html
index 03a4f894..36b83a3c 100644
--- a/archives/2022/11/index.html
+++ b/archives/2022/11/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十一月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十一月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/12/index.html b/archives/2022/12/index.html
index b37a65f3..98c902ce 100644
--- a/archives/2022/12/index.html
+++ b/archives/2022/12/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十二月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 2</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十二月 2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 2</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/index.html b/archives/2022/index.html
index 618b5f1a..df102054 100644
--- a/archives/2022/index.html
+++ b/archives/2022/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 33</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/archives/2022/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/archives/2022/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 33</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/archives/2022/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/archives/2022/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/page/2/index.html b/archives/2022/page/2/index.html
index 3aa3a98b..106b541e 100644
--- a/archives/2022/page/2/index.html
+++ b/archives/2022/page/2/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 33</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3a42db2d.html" title="Vue3"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_20.webp" alt="Vue3" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></div><a class="article-sort-item-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/facd74f4.html" title="Echarts"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_2.webp" alt="Echarts" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></div><a class="article-sort-item-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/2022/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/2022/">1</a><span class="page-number current">2</span><a class="page-number" href="/archives/2022/page/3/">3</a><a class="page-number" href="/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/archives/2022/page/3/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 33</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3a42db2d.html" title="Vue3"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_20.webp" alt="Vue3" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></div><a class="article-sort-item-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/facd74f4.html" title="Echarts"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_2.webp" alt="Echarts" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></div><a class="article-sort-item-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/2022/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/2022/">1</a><span class="page-number current">2</span><a class="page-number" href="/archives/2022/page/3/">3</a><a class="page-number" href="/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/archives/2022/page/3/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/page/3/index.html b/archives/2022/page/3/index.html
index a91921fb..fb2708a8 100644
--- a/archives/2022/page/3/index.html
+++ b/archives/2022/page/3/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 33</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/2022/page/2/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/2022/">1</a><a class="page-number" href="/archives/2022/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/archives/2022/page/4/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 33</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/2022/page/2/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/2022/">1</a><a class="page-number" href="/archives/2022/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/archives/2022/page/4/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2022/page/4/index.html b/archives/2022/page/4/index.html
index 42af13ee..ad7a811b 100644
--- a/archives/2022/page/4/index.html
+++ b/archives/2022/page/4/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 33</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/2022/page/3/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/2022/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2022/page/3/">3</a><span class="page-number current">4</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2022</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 33</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/2022/page/3/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/2022/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2022/page/3/">3</a><span class="page-number current">4</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2023/01/index.html b/archives/2023/01/index.html
index bb2691a4..cbe74e1e 100644
--- a/archives/2023/01/index.html
+++ b/archives/2023/01/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">一月 2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 2</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7067fd0d.html" title="TypeScript"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_16.webp" alt="TypeScript" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></div><a class="article-sort-item-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">一月 2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 2</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7067fd0d.html" title="TypeScript"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_16.webp" alt="TypeScript" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></div><a class="article-sort-item-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2023/04/index.html b/archives/2023/04/index.html
index f58b8639..1149e25f 100644
--- a/archives/2023/04/index.html
+++ b/archives/2023/04/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">四月 2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">四月 2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2023/08/index.html b/archives/2023/08/index.html
index 5cc09390..12e05cd3 100644
--- a/archives/2023/08/index.html
+++ b/archives/2023/08/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">八月 2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" alt="Nginx" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div><a class="article-sort-item-title" href="/articles/65b69107.html" title="Nginx">Nginx</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">八月 2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" alt="Nginx" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div><a class="article-sort-item-title" href="/articles/65b69107.html" title="Nginx">Nginx</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2023/10/index.html b/archives/2023/10/index.html
index 08e6ce81..ec0dfa2a 100644
--- a/archives/2023/10/index.html
+++ b/archives/2023/10/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十月 2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十月 2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2023/11/index.html b/archives/2023/11/index.html
index c80f2185..6c83b86a 100644
--- a/archives/2023/11/index.html
+++ b/archives/2023/11/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十一月 2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" alt="网络安全修改" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div><a class="article-sort-item-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">十一月 2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" alt="网络安全修改" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div><a class="article-sort-item-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2023/index.html b/archives/2023/index.html
index c1d9bfa3..06fd828b 100644
--- a/archives/2023/index.html
+++ b/archives/2023/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 6</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" alt="网络安全修改" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div><a class="article-sort-item-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" alt="Nginx" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div><a class="article-sort-item-title" href="/articles/65b69107.html" title="Nginx">Nginx</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7067fd0d.html" title="TypeScript"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_16.webp" alt="TypeScript" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></div><a class="article-sort-item-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2023</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 6</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" alt="网络安全修改" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div><a class="article-sort-item-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" alt="Nginx" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div><a class="article-sort-item-title" href="/articles/65b69107.html" title="Nginx">Nginx</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7067fd0d.html" title="TypeScript"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_16.webp" alt="TypeScript" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></div><a class="article-sort-item-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2024/01/index.html b/archives/2024/01/index.html
index 89b79b5f..cd5d4159 100644
--- a/archives/2024/01/index.html
+++ b/archives/2024/01/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">一月 2024</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2024</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" alt="webpack" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div><a class="article-sort-item-title" href="/articles/b9f20a20.html" title="webpack">webpack</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">一月 2024</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2024</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" alt="webpack" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div><a class="article-sort-item-title" href="/articles/b9f20a20.html" title="webpack">webpack</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/2024/index.html b/archives/2024/index.html
index 31969bf1..c78125e4 100644
--- a/archives/2024/index.html
+++ b/archives/2024/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2024</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2024</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" alt="webpack" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div><a class="article-sort-item-title" href="/articles/b9f20a20.html" title="webpack">webpack</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">2024</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 1</div><div class="article-sort"><div class="article-sort-item year">2024</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" alt="webpack" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div><a class="article-sort-item-title" href="/articles/b9f20a20.html" title="webpack">webpack</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/index.html b/archives/index.html
index ee15e00f..8548b97d 100644
--- a/archives/index.html
+++ b/archives/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">时间轴</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 45</div><div class="article-sort"><div class="article-sort-item year">2024</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" alt="webpack" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div><a class="article-sort-item-title" href="/articles/b9f20a20.html" title="webpack">webpack</a></div></div><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" alt="网络安全修改" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div><a class="article-sort-item-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" alt="Nginx" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div><a class="article-sort-item-title" href="/articles/65b69107.html" title="Nginx">Nginx</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7067fd0d.html" title="TypeScript"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_16.webp" alt="TypeScript" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></div><a class="article-sort-item-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/archives/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/5/">5</a><a class="extend next" rel="next" href="/archives/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">时间轴</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 45</div><div class="article-sort"><div class="article-sort-item year">2024</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" alt="webpack" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div><a class="article-sort-item-title" href="/articles/b9f20a20.html" title="webpack">webpack</a></div></div><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" alt="网络安全修改" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div><a class="article-sort-item-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" alt="Nginx" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div><a class="article-sort-item-title" href="/articles/65b69107.html" title="Nginx">Nginx</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7067fd0d.html" title="TypeScript"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_16.webp" alt="TypeScript" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></div><a class="article-sort-item-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/archives/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/5/">5</a><a class="extend next" rel="next" href="/archives/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/page/2/index.html b/archives/page/2/index.html
index cfb8e984..34b5811d 100644
--- a/archives/page/2/index.html
+++ b/archives/page/2/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">时间轴</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 45</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/">1</a><span class="page-number current">2</span><a class="page-number" href="/archives/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/5/">5</a><a class="extend next" rel="next" href="/archives/page/3/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">时间轴</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 45</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/">1</a><span class="page-number current">2</span><a class="page-number" href="/archives/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/5/">5</a><a class="extend next" rel="next" href="/archives/page/3/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/page/3/index.html b/archives/page/3/index.html
index 0306422a..1df4bf03 100644
--- a/archives/page/3/index.html
+++ b/archives/page/3/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">时间轴</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 45</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3a42db2d.html" title="Vue3"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_20.webp" alt="Vue3" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></div><a class="article-sort-item-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/facd74f4.html" title="Echarts"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_2.webp" alt="Echarts" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></div><a class="article-sort-item-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/page/2/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/">1</a><a class="page-number" href="/archives/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/archives/page/4/">4</a><a class="page-number" href="/archives/page/5/">5</a><a class="extend next" rel="next" href="/archives/page/4/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">时间轴</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 45</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3a42db2d.html" title="Vue3"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_20.webp" alt="Vue3" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></div><a class="article-sort-item-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/facd74f4.html" title="Echarts"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_2.webp" alt="Echarts" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></div><a class="article-sort-item-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/page/2/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/">1</a><a class="page-number" href="/archives/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/archives/page/4/">4</a><a class="page-number" href="/archives/page/5/">5</a><a class="extend next" rel="next" href="/archives/page/4/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/page/4/index.html b/archives/page/4/index.html
index 064930b8..a3c8e6d6 100644
--- a/archives/page/4/index.html
+++ b/archives/page/4/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">时间轴</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 45</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/page/3/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/archives/page/5/">5</a><a class="extend next" rel="next" href="/archives/page/5/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">时间轴</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 45</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/page/3/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/archives/page/5/">5</a><a class="extend next" rel="next" href="/archives/page/5/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/archives/page/5/index.html b/archives/page/5/index.html
index 19e442b1..527c5749 100644
--- a/archives/page/5/index.html
+++ b/archives/page/5/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">时间轴</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 45</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4c664111.html" title="PhotoShop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_13.webp" alt="PhotoShop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></div><a class="article-sort-item-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/page/4/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/4/">4</a><span class="page-number current">5</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">时间轴</h1></div></header><main class="layout" id="content-inner"><div id="archive"><div class="article-sort-title">文章总览 - 45</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4c664111.html" title="PhotoShop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_13.webp" alt="PhotoShop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></div><a class="article-sort-item-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/archives/page/4/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/4/">4</a><span class="page-number current">5</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/12a67745.html b/articles/12a67745.html
index 830587ad..b19def70 100644
--- a/articles/12a67745.html
+++ b/articles/12a67745.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:35:53'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_17.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Typora常用快捷键</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:35:53.327Z" title="更新于 2024-02-26 19:35:53">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Typora/">Typora</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Typora/hexo/">hexo</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">514</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>1分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Typora常用快捷键"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Typora"><a href="#Typora" class="headerlink" title="Typora"></a>Typora</h1><p>一款编写Markdown的软件</p>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_17.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Typora常用快捷键</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Typora/">Typora</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Typora/hexo/">hexo</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">514</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>1分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Typora常用快捷键"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Typora"><a href="#Typora" class="headerlink" title="Typora"></a>Typora</h1><p>一款编写Markdown的软件</p>
 <h1 id="常用快捷键"><a href="#常用快捷键" class="headerlink" title="常用快捷键"></a>常用快捷键</h1><h2 id="标题的使用"><a href="#标题的使用" class="headerlink" title="标题的使用"></a>标题的使用</h2><p># 一阶标题 或者快捷键Ctrl+1</p>
 <p>##二阶标题 或者快捷键Ctrl+2</p>
 <p>###三阶标题 或者快捷键Ctrl+3</p>
@@ -187,7 +187,7 @@ <h2 id="锚点跳转"><a href="#锚点跳转" class="headerlink" title="锚点
 </ol>
 <figure class="highlight html"><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"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;click_jump&quot;</span>&gt;</span>跳转到此处<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">或者</span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">id</span>=<span class="string">&quot;click_jump&quot;</span>&gt;</span>跳转到此处<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>
 
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/12a67745.html">https://fsllala.top/articles/12a67745.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/">快捷键</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_17.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="next-post pull-full"><a href="/articles/73805dbf.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs起本地服务</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Typora"><span class="toc-number">1.</span> <span class="toc-text">Typora</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B7%E9%94%AE"><span class="toc-number">2.</span> <span class="toc-text">常用快捷键</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E9%A2%98%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">2.1.</span> <span class="toc-text">标题的使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.2.</span> <span class="toc-text">字体样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%86%E5%89%B2%E7%BA%BF"><span class="toc-number">2.3.</span> <span class="toc-text">分割线</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%97%E8%A1%A8"><span class="toc-number">2.4.</span> <span class="toc-text">列表</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8"><span class="toc-number">2.4.1.</span> <span class="toc-text">无序列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8"><span class="toc-number">2.4.2.</span> <span class="toc-text">有序列表</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E4%BB%A3%E7%A0%81"><span class="toc-number">2.5.</span> <span class="toc-text">插入代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87"><span class="toc-number">2.6.</span> <span class="toc-text">插入图片</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E8%A1%A8%E6%A0%BC"><span class="toc-number">2.7.</span> <span class="toc-text">插入表格</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E9%93%BE%E6%8E%A5"><span class="toc-number">2.8.</span> <span class="toc-text">插入链接</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%94%9A%E7%82%B9%E8%B7%B3%E8%BD%AC"><span class="toc-number">2.9.</span> <span class="toc-text">锚点跳转</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/12a67745.html">https://fsllala.top/articles/12a67745.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/">快捷键</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_17.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="next-post pull-full"><a href="/articles/73805dbf.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_11.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs起本地服务</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Typora"><span class="toc-number">1.</span> <span class="toc-text">Typora</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B7%E9%94%AE"><span class="toc-number">2.</span> <span class="toc-text">常用快捷键</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E9%A2%98%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">2.1.</span> <span class="toc-text">标题的使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.2.</span> <span class="toc-text">字体样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%86%E5%89%B2%E7%BA%BF"><span class="toc-number">2.3.</span> <span class="toc-text">分割线</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%97%E8%A1%A8"><span class="toc-number">2.4.</span> <span class="toc-text">列表</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8"><span class="toc-number">2.4.1.</span> <span class="toc-text">无序列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8"><span class="toc-number">2.4.2.</span> <span class="toc-text">有序列表</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E4%BB%A3%E7%A0%81"><span class="toc-number">2.5.</span> <span class="toc-text">插入代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87"><span class="toc-number">2.6.</span> <span class="toc-text">插入图片</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E8%A1%A8%E6%A0%BC"><span class="toc-number">2.7.</span> <span class="toc-text">插入表格</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E9%93%BE%E6%8E%A5"><span class="toc-number">2.8.</span> <span class="toc-text">插入链接</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%94%9A%E7%82%B9%E8%B7%B3%E8%BD%AC"><span class="toc-number">2.9.</span> <span class="toc-text">锚点跳转</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/16b55383.html b/articles/16b55383.html
index 7304ddb3..02caea32 100644
--- a/articles/16b55383.html
+++ b/articles/16b55383.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:32:35'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,13 +133,13 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_4.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Dom尺寸与位置</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:32:35.073Z" title="更新于 2024-02-26 19:32:35">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/">Dom尺寸与位置</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>4分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Dom尺寸与位置"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="浏览器"><a href="#浏览器" class="headerlink" title="浏览器"></a>浏览器</h1><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_4.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Dom尺寸与位置</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.898Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/">Dom尺寸与位置</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>4分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Dom尺寸与位置"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="浏览器"><a href="#浏览器" class="headerlink" title="浏览器"></a>浏览器</h1><ul>
 <li>整个屏幕的尺寸：<code>window.screen.width/height</code>；</li>
 <li>浏览器的尺寸：<code>window.outerWidth/outerHeight</code>；</li>
 <li>浏览器内部尺寸(包括滚定条)：<code>window.innerWidth/innerHeight</code>；</li>
 <li>视口尺寸(不包括滚动条)：<code>document.documentElement.clientWidth/clientHeight</code>；</li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/BOM1700455005.jpg" alt="BOM"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/BOM1700455005.jpg" alt="BOM"></p>
 <h1 id="单个元素"><a href="#单个元素" class="headerlink" title="单个元素"></a>单个元素</h1><h2 id="client系列"><a href="#client系列" class="headerlink" title="client系列"></a>client系列</h2><ul>
 <li>clientWidth：元素自身的宽度+左右填充；<code>width + padding-left + padding-right</code></li>
 <li>clientHeight：元素自身的高度+上下填充；<code>height + padding-top + padding-bottom</code></li>
@@ -150,7 +150,7 @@ <h2 id="offset系列"><a href="#offset系列" class="headerlink" title="offset
 <li>offsetWidth：clientWidth+左右边框；<code>clientWidth + border-left + border-right+滚动条(如果有)</code></li>
 <li>offsetHeight：clientHeight+上下边框；<code>clientHeight + border-top + border-bottom+滚动条(如果有)</code></li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/offsetWidth120180816173539646.png" alt="offsetWidth"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/offsetWidth120180816173539646.png" alt="offsetWidth"></p>
 <ul>
 <li><p>offsetParent：取已经定位的父集元素，没有已经定位的父集元素，就是获取body；</p>
 </li>
@@ -158,17 +158,17 @@ <h2 id="offset系列"><a href="#offset系列" class="headerlink" title="offset
 <ol>
 <li>在父元素均不设置position属性时，在Chrome，opera和IE浏览器中offsetLeft是元素边框外侧到浏览器窗口内侧的距离：</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/offsetLeft120180816171816115.png" alt="offsetLeft"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/offsetLeft120180816171816115.png" alt="offsetLeft"></p>
 <ol start="2">
 <li><p>当父元素设置position元素时又分为两种情况：</p>
 <ol>
 <li>如果父元素是body且body设置了position属性，在Chrome和opera浏览器中offsetLeft是元素边框外侧到body边框外侧的距离</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/offsetLeft220180816172015337.png" alt="offsetLeft"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/offsetLeft220180816172015337.png" alt="offsetLeft"></p>
 <ol start="2">
 <li>如果父元素不是body元素且设置了position属性时，offsetLeft为元素边框外侧到父元素边框内侧的距离（各浏览器情况一致）。</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/offsetLeft320180816172126830.png" alt="offsetLeft"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/offsetLeft320180816172126830.png" alt="offsetLeft"></p>
 </li>
 </ol>
 </li>
@@ -226,7 +226,7 @@ <h2 id="回到顶部"><a href="#回到顶部" class="headerlink" title="回到
 <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a target="_blank" rel="noopener" href="https://blog.csdn.net/willard_cui/article/details/81712989">offsetWidth与offsetLeft</a></p>
 <p><a target="_blank" rel="noopener" href="https://www.jb51.net/article/58688.htm">JS实现判断滚动条滚到页面底部并执行事件的方法</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_41800366/article/details/85995432">JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/16b55383.html">https://fsllala.top/articles/16b55383.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/">Dom尺寸与位置</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_4.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/59b49683.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_1.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Dom</div></div></a></div><div class="next-post pull-right"><a href="/articles/3d72a2c2.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_30.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">懒加载</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8"><span class="toc-number">1.</span> <span class="toc-text">浏览器</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8D%95%E4%B8%AA%E5%85%83%E7%B4%A0"><span class="toc-number">2.</span> <span class="toc-text">单个元素</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#client%E7%B3%BB%E5%88%97"><span class="toc-number">2.1.</span> <span class="toc-text">client系列</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#offset%E7%B3%BB%E5%88%97"><span class="toc-number">2.2.</span> <span class="toc-text">offset系列</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#scroll%E7%B3%BB%E5%88%97"><span class="toc-number">2.3.</span> <span class="toc-text">scroll系列</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E4%BD%8D%E7%BD%AE"><span class="toc-number">2.4.</span> <span class="toc-text">元素位置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Tips%EF%BC%9A"><span class="toc-number">2.5.</span> <span class="toc-text">Tips：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%A4%E6%96%AD%E6%BB%9A%E5%8A%A8%E6%9D%A1%E6%BB%9A%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%BA%95%E9%83%A8"><span class="toc-number">2.6.</span> <span class="toc-text">判断滚动条滚到页面底部</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E9%98%85%E8%AF%BB%E8%BF%9B%E5%BA%A6"><span class="toc-number">2.7.</span> <span class="toc-text">文章阅读进度</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E9%A6%96%E5%B1%8F%E7%9A%84%E5%AE%BD%E5%BA%A6-x2F-%E9%AB%98%E5%BA%A6"><span class="toc-number">2.8.</span> <span class="toc-text">获取首屏的宽度&#x2F;高度</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8"><span class="toc-number">2.9.</span> <span class="toc-text">回到顶部</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">3.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/16b55383.html">https://fsllala.top/articles/16b55383.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/">Dom尺寸与位置</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_4.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/59b49683.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_1.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Dom</div></div></a></div><div class="next-post pull-right"><a href="/articles/3d72a2c2.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_30.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">懒加载</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8"><span class="toc-number">1.</span> <span class="toc-text">浏览器</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8D%95%E4%B8%AA%E5%85%83%E7%B4%A0"><span class="toc-number">2.</span> <span class="toc-text">单个元素</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#client%E7%B3%BB%E5%88%97"><span class="toc-number">2.1.</span> <span class="toc-text">client系列</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#offset%E7%B3%BB%E5%88%97"><span class="toc-number">2.2.</span> <span class="toc-text">offset系列</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#scroll%E7%B3%BB%E5%88%97"><span class="toc-number">2.3.</span> <span class="toc-text">scroll系列</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E4%BD%8D%E7%BD%AE"><span class="toc-number">2.4.</span> <span class="toc-text">元素位置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Tips%EF%BC%9A"><span class="toc-number">2.5.</span> <span class="toc-text">Tips：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%A4%E6%96%AD%E6%BB%9A%E5%8A%A8%E6%9D%A1%E6%BB%9A%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%BA%95%E9%83%A8"><span class="toc-number">2.6.</span> <span class="toc-text">判断滚动条滚到页面底部</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E9%98%85%E8%AF%BB%E8%BF%9B%E5%BA%A6"><span class="toc-number">2.7.</span> <span class="toc-text">文章阅读进度</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E9%A6%96%E5%B1%8F%E7%9A%84%E5%AE%BD%E5%BA%A6-x2F-%E9%AB%98%E5%BA%A6"><span class="toc-number">2.8.</span> <span class="toc-text">获取首屏的宽度&#x2F;高度</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8"><span class="toc-number">2.9.</span> <span class="toc-text">回到顶部</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">3.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/1c4c16aa.html b/articles/1c4c16aa.html
index 4d6cb941..33a9820b 100644
--- a/articles/1c4c16aa.html
+++ b/articles/1c4c16aa.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:36:28'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_21.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 hook</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:36:28.239Z" title="更新于 2024-02-26 19:36:28">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3-hook/">Vue3 hook</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">520</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>2分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 hook"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="自定义hook"><a href="#自定义hook" class="headerlink" title="自定义hook"></a>自定义hook</h2><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_21.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 hook</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3-hook/">Vue3 hook</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">520</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>2分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 hook"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="自定义hook"><a href="#自定义hook" class="headerlink" title="自定义hook"></a>自定义hook</h2><blockquote>
 <p>本质是一个函数，把<code>setup</code>函数中使用的 <code>Composition API</code> 进行了封装；</p>
 <p>类似于2.x中 的<code>mixin</code>；</p>
 <p>自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂；</p>
@@ -153,7 +153,7 @@
 <blockquote>
 <p>在需要用这个功能的地方</p>
 </blockquote>
-<figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>点前点击的鼠标的坐标为x:&#123;&#123; point.x &#125;&#125;,y:&#123;&#123; point.y &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// 1.引入一下</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> usePoint <span class="keyword">from</span> <span class="string">&quot;../hook/usePoint&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 2. 调用一下</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// usePoint是 一个函数,这个函数 return出来了所需的数据;调用这个函数;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> point = <span class="title function_">usePoint</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 3.暴露出去</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      point,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/1c4c16aa.html">https://fsllala.top/articles/1c4c16aa.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3-hook/">Vue3 hook</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_21.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/459aa16c.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_24.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3 setup参数</div></div></a></div><div class="next-post pull-right"><a href="/articles/7db1b1fe.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_18.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3 watch</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89hook"><span class="toc-number">1.</span> <span class="toc-text">自定义hook</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+<figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>点前点击的鼠标的坐标为x:&#123;&#123; point.x &#125;&#125;,y:&#123;&#123; point.y &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// 1.引入一下</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> usePoint <span class="keyword">from</span> <span class="string">&quot;../hook/usePoint&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 2. 调用一下</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// usePoint是 一个函数,这个函数 return出来了所需的数据;调用这个函数;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> point = <span class="title function_">usePoint</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 3.暴露出去</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      point,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/1c4c16aa.html">https://fsllala.top/articles/1c4c16aa.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3-hook/">Vue3 hook</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_21.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/459aa16c.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_24.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3 setup参数</div></div></a></div><div class="next-post pull-right"><a href="/articles/7db1b1fe.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_18.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3 watch</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89hook"><span class="toc-number">1.</span> <span class="toc-text">自定义hook</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/28239a8d.html b/articles/28239a8d.html
index a68f2955..6f5bbda5 100644
--- a/articles/28239a8d.html
+++ b/articles/28239a8d.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:39:12'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">面向对象</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:39:12.041Z" title="更新于 2024-02-26 19:39:12">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/">面向对象</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>9分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="面向对象"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h1><p>在javaScript中我们我们有两大编程思想，面向过程（POP）和 面向对象（OOP）；</p>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_31.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">面向对象</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.868Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/">面向对象</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>9分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="面向对象"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h1><p>在javaScript中我们我们有两大编程思想，面向过程（POP）和 面向对象（OOP）；</p>
 <ul>
 <li><p>面向过程：关心的是代码每一步的的实现，先去做什么然后再做什么</p>
 </li>
@@ -237,7 +237,7 @@ <h2 id="原型模式"><a href="#原型模式" class="headerlink" title="原型
 
 <p>详情可参考：</p>
 <p><a target="_blank" rel="noopener" href="https://fsllala.eu.org/2022/02/26/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE/">原型与原型链</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/28239a8d.html">https://fsllala.top/articles/28239a8d.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/">面向对象</a><a class="post-meta__tags" href="/tags/%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0/">构造函数</a><a class="post-meta__tags" href="/tags/%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F/">原型模式</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/df38ec5a.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">EventLoop</div></div></a></div><div class="next-post pull-right"><a href="/articles/e8f85541.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">原型与原型链</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A6%82%E5%BF%B5"><span class="toc-number">1.</span> <span class="toc-text">概念</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%89%B9%E5%BE%81"><span class="toc-number">1.1.</span> <span class="toc-text">面向对象的特征</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%85%B3%E7%B3%BB"><span class="toc-number">1.2.</span> <span class="toc-text">类和对象的关系</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E7%B1%BB"><span class="toc-number">1.3.</span> <span class="toc-text">如何创建类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%AE%9E%E4%BE%8B%E5%8C%96%E4%B8%80%E4%B8%AA%E7%B1%BB"><span class="toc-number">1.4.</span> <span class="toc-text">如何实例化一个类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9E%84%E9%80%A0%E5%99%A8"><span class="toc-number">1.5.</span> <span class="toc-text">构造器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%A7%E6%89%BF"><span class="toc-number">1.6.</span> <span class="toc-text">继承</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%A7%E6%89%BF%E6%9E%84%E9%80%A0%E5%99%A8"><span class="toc-number">1.7.</span> <span class="toc-text">继承构造器</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-number">2.</span> <span class="toc-text">创建对象的方式</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%97%E9%9D%A2%E9%87%8F%E6%96%B9%E5%BC%8F"><span class="toc-number">2.1.</span> <span class="toc-text">字面量方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B7%A5%E5%8E%82%E5%87%BD%E6%95%B0%E6%A8%A1%E5%BC%8F"><span class="toc-number">2.2.</span> <span class="toc-text">工厂函数模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E6%A8%A1%E5%BC%8F"><span class="toc-number">2.3.</span> <span class="toc-text">构造函数模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F"><span class="toc-number">2.4.</span> <span class="toc-text">原型模式</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/28239a8d.html">https://fsllala.top/articles/28239a8d.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/">面向对象</a><a class="post-meta__tags" href="/tags/%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0/">构造函数</a><a class="post-meta__tags" href="/tags/%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F/">原型模式</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_31.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/df38ec5a.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_3.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">EventLoop</div></div></a></div><div class="next-post pull-right"><a href="/articles/e8f85541.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_36.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">原型与原型链</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A6%82%E5%BF%B5"><span class="toc-number">1.</span> <span class="toc-text">概念</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%89%B9%E5%BE%81"><span class="toc-number">1.1.</span> <span class="toc-text">面向对象的特征</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%85%B3%E7%B3%BB"><span class="toc-number">1.2.</span> <span class="toc-text">类和对象的关系</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E7%B1%BB"><span class="toc-number">1.3.</span> <span class="toc-text">如何创建类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%AE%9E%E4%BE%8B%E5%8C%96%E4%B8%80%E4%B8%AA%E7%B1%BB"><span class="toc-number">1.4.</span> <span class="toc-text">如何实例化一个类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9E%84%E9%80%A0%E5%99%A8"><span class="toc-number">1.5.</span> <span class="toc-text">构造器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%A7%E6%89%BF"><span class="toc-number">1.6.</span> <span class="toc-text">继承</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%A7%E6%89%BF%E6%9E%84%E9%80%A0%E5%99%A8"><span class="toc-number">1.7.</span> <span class="toc-text">继承构造器</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-number">2.</span> <span class="toc-text">创建对象的方式</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%97%E9%9D%A2%E9%87%8F%E6%96%B9%E5%BC%8F"><span class="toc-number">2.1.</span> <span class="toc-text">字面量方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B7%A5%E5%8E%82%E5%87%BD%E6%95%B0%E6%A8%A1%E5%BC%8F"><span class="toc-number">2.2.</span> <span class="toc-text">工厂函数模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E6%A8%A1%E5%BC%8F"><span class="toc-number">2.3.</span> <span class="toc-text">构造函数模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F"><span class="toc-number">2.4.</span> <span class="toc-text">原型模式</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/31c1f94e.html b/articles/31c1f94e.html
index 151f9948..602a0158 100644
--- a/articles/31c1f94e.html
+++ b/articles/31c1f94e.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:40:06'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">预解析</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:40:06.148Z" title="更新于 2024-02-26 19:40:06">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/">预解析</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/">作用域链</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">622</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>2分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="预解析"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="预解析"><a href="#预解析" class="headerlink" title="预解析"></a>预解析</h1><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_35.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">预解析</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.873Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/">预解析</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/">作用域链</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">622</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>2分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="预解析"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="预解析"><a href="#预解析" class="headerlink" title="预解析"></a>预解析</h1><ul>
 <li>代码运行到浏览器，浏览器提供了一个供JS代码执行的环境(栈区)，在代码执行之前先进行预解析；预解析完成了，代码才会执行。</li>
 <li>预解析又称为变量提升，预解析会对所有(全局与局部)带有var和function关键字的进行预解析；</li>
 <li>预解析分为以下两部分：<ul>
@@ -161,13 +161,13 @@
 
 <p>解析：</p>
 <p>先进行预解析，预解析完了，代码从上往下开始运行；<strong>堆区是存储的，栈区才是代码执行；</strong></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847602916yjx.png" alt="栗子1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847602916yjx.png" alt="栗子1"></p>
 <p>栗子2：</p>
 <p>Tips：先把外层的函数合起来，这样就好分析了。</p>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a, b); <span class="comment">//undefined undefined</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">200</span>;</span><br><span class="line"><span class="title function_">sum</span>();</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b);<span class="comment">//undefined undefined</span></span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">1000</span>;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="number">2000</span>;</span><br><span class="line">    <span class="title function_">hello</span>();</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">hello</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;2022平安喜乐&quot;</span>) <span class="comment">//2022平安喜乐</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
 <p>解析：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847640974yjx2.png" alt="栗子2"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847640974yjx2.png" alt="栗子2"></p>
 <p>栗子3：</p>
 <p>Tips：先把外层的函数合起来，这样就好分析了。</p>
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">200</span>;</span><br><span class="line"><span class="keyword">var</span> c = <span class="number">300</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test1</span>(<span class="params">num1</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">10</span>;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="number">20</span>;</span><br><span class="line">    a++;</span><br><span class="line">    b++;</span><br><span class="line">    c++;</span><br><span class="line">    num1++;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c, num1);</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">test2</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> c = <span class="number">30</span>;</span><br><span class="line">        a++;</span><br><span class="line">        b++;</span><br><span class="line">        c++</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">test2</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">test1</span>(<span class="number">5</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c);</span><br></pre></td></tr></table></figure>
@@ -175,9 +175,9 @@
 <p><strong>知识点：</strong></p>
 <p><strong>作用域链：</strong></p>
 <p>作用域链，是一种查找机制，在当前作用域下用到某个变量或方法，先看当前这个作用域有没有，有先用自己私有的，没有往上一级作用域进行查找，上一级作用域没有，再往上一级作用域进行查找，知道找到全局作用域为止（window为止）</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847677915yjx3.png" alt="栗子3"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847677915yjx3.png" alt="栗子3"></p>
 <p>PS：函数执行完成会自动销毁，定义一个函数可以调用无数次，每次相互独立的；即从xxxfff000&lt;&#x3D;&gt;test(1)执行完，就销毁释放内存了；</p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/31c1f94e.html">https://fsllala.top/articles/31c1f94e.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E9%A2%84%E8%A7%A3%E6%9E%90/">预解析</a><a class="post-meta__tags" href="/tags/%E5%8F%98%E9%87%8F%E6%8F%90%E7%A4%BA/">变量提示</a><a class="post-meta__tags" href="/tags/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/">作用域链</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/f2866b73.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">箭头函数</div></div></a></div><div class="next-post pull-right"><a href="/articles/59b49683.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_1.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Dom</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%A2%84%E8%A7%A3%E6%9E%90"><span class="toc-number">1.</span> <span class="toc-text">预解析</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/31c1f94e.html">https://fsllala.top/articles/31c1f94e.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E9%A2%84%E8%A7%A3%E6%9E%90/">预解析</a><a class="post-meta__tags" href="/tags/%E5%8F%98%E9%87%8F%E6%8F%90%E7%A4%BA/">变量提示</a><a class="post-meta__tags" href="/tags/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/">作用域链</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_35.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/f2866b73.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_39.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">箭头函数</div></div></a></div><div class="next-post pull-right"><a href="/articles/59b49683.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_1.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Dom</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%A2%84%E8%A7%A3%E6%9E%90"><span class="toc-number">1.</span> <span class="toc-text">预解析</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/3a42db2d.html b/articles/3a42db2d.html
index 2955be13..29fb0e98 100644
--- a/articles/3a42db2d.html
+++ b/articles/3a42db2d.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:36:19'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_20.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:36:19.721Z" title="更新于 2024-02-26 19:36:19">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">9.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>38分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Vue3"><a href="#Vue3" class="headerlink" title="Vue3"></a>Vue3</h1><h2 id="Vue3介绍"><a href="#Vue3介绍" class="headerlink" title="Vue3介绍"></a>Vue3介绍</h2><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_20.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">9.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>38分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Vue3"><a href="#Vue3" class="headerlink" title="Vue3"></a>Vue3</h1><h2 id="Vue3介绍"><a href="#Vue3介绍" class="headerlink" title="Vue3介绍"></a>Vue3介绍</h2><blockquote>
 <p>Vue.JS 3.0兼容2.0的大多数语法。</p>
 </blockquote>
 <h3 id="性能提升"><a href="#性能提升" class="headerlink" title="性能提升"></a>性能提升</h3><ol>
@@ -386,7 +386,7 @@ <h3 id="Composition-组合-API"><a href="#Composition-组合-API" class="headerl
 </ul>
 </li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://i.bmp.ovh/imgs/2022/03/a0a0ee3a6c6c8389.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://i.bmp.ovh/imgs/2022/03/a0a0ee3a6c6c8389.png"></p>
 <blockquote>
 <p>那如何在setup中使用钩子函数呢？</p>
 </blockquote>
@@ -456,7 +456,7 @@ <h3 id="Teleport：瞬移组件的位置"><a href="#Teleport：瞬移组件的
 <p>由于我们在<code>#myTelePort</code>中传递了代码，因此 Vue会找到包含在<code>index.html</code>中的<code>#myTelePort</code> div，它会把 Teleport 内的所有代码渲染到该<code>div</code>中。</p>
 </blockquote>
 <p>效果图：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://i.bmp.ovh/imgs/2022/03/1b5ed2554a135a25.png" alt="Teleport"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://i.bmp.ovh/imgs/2022/03/1b5ed2554a135a25.png" alt="Teleport"></p>
 <h3 id="全局组件注册方式"><a href="#全局组件注册方式" class="headerlink" title="全局组件注册方式"></a>全局组件注册方式</h3><ul>
 <li>vue2注册全局组件</li>
 </ul>
@@ -689,7 +689,7 @@ <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_30040899/article/details/117032231?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%20%20$attrs&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-4-117032231.142%5Ev2%5Epc_search_result_control_group,143%5Ev4%5Econtrol&spm=1018.2226.3001.4187">Vue2$attrs组件传值</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_41977619/article/details/116595972?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_utm_term~default-8.pc_relevant_antiscanv2&spm=1001.2101.3001.4242.5&utm_relevant_index=11">Vue3 全局挂载对象和方法</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/m0_50864962/article/details/122965673?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164760104816780357214622%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164760104816780357214622&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-8-122965673.142%5Ev2%5Epc_search_result_control_group,143%5Ev4%5Econtrol&utm_term=vue3+mitt&spm=1018.2226.3001.4187">Vue3兄弟组件传值方式mitt.js</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/3a42db2d.html">https://fsllala.top/articles/3a42db2d.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3/">Vue3</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_20.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/facd74f4.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_2.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Echarts</div></div></a></div><div class="next-post pull-right"><a href="/articles/d61e2f28.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_23.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3响应式数据</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue3"><span class="toc-number">1.</span> <span class="toc-text">Vue3</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue3%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.1.</span> <span class="toc-text">Vue3介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87"><span class="toc-number">1.1.1.</span> <span class="toc-text">性能提升</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96Vue3-0"><span class="toc-number">1.2.</span> <span class="toc-text">获取Vue3.0</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B0%E5%A2%9E%E7%89%B9%E6%80%A7"><span class="toc-number">1.3.</span> <span class="toc-text">新增特性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Fragment%E6%A8%A1%E6%9D%BF%E7%A2%8E%E7%89%87"><span class="toc-number">1.3.1.</span> <span class="toc-text">Fragment模板碎片</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Composition-%E7%BB%84%E5%90%88-API"><span class="toc-number">1.3.2.</span> <span class="toc-text">Composition(组合)API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#h%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0"><span class="toc-number">1.3.3.</span> <span class="toc-text">h渲染函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Teleport%EF%BC%9A%E7%9E%AC%E7%A7%BB%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%8D%E7%BD%AE"><span class="toc-number">1.3.4.</span> <span class="toc-text">Teleport：瞬移组件的位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6%E6%B3%A8%E5%86%8C%E6%96%B9%E5%BC%8F"><span class="toc-number">1.3.5.</span> <span class="toc-text">全局组件注册方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6"><span class="toc-number">1.3.6.</span> <span class="toc-text">函数式组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6"><span class="toc-number">1.3.7.</span> <span class="toc-text">异步组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-for%E4%B8%AD%E4%BD%BF%E7%94%A8ref%E5%B1%9E%E6%80%A7"><span class="toc-number">1.3.8.</span> <span class="toc-text">v-for中使用ref属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-for%E4%B8%8Ev-if%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">1.3.9.</span> <span class="toc-text">v-for与v-if优先级</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4"><span class="toc-number">1.3.10.</span> <span class="toc-text">自定义指令</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#app-config-globalProperties%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7"><span class="toc-number">1.3.11.</span> <span class="toc-text">app.config.globalProperties全局属性</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A7%BB%E9%99%A4%E5%B1%9E%E6%80%A7"><span class="toc-number">1.4.</span> <span class="toc-text">移除属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#children"><span class="toc-number">1.4.1.</span> <span class="toc-text">$children</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#filter%E8%BF%87%E6%BB%A4%E5%99%A8"><span class="toc-number">1.4.2.</span> <span class="toc-text">filter过滤器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vm-set-Vue-set"><span class="toc-number">1.4.3.</span> <span class="toc-text">vm.$set(Vue.set)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vm-on"><span class="toc-number">1.4.4.</span> <span class="toc-text">vm.$on</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">2.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/3a42db2d.html">https://fsllala.top/articles/3a42db2d.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3/">Vue3</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_20.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/facd74f4.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_2.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Echarts</div></div></a></div><div class="next-post pull-right"><a href="/articles/d61e2f28.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_23.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3响应式数据</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue3"><span class="toc-number">1.</span> <span class="toc-text">Vue3</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue3%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.1.</span> <span class="toc-text">Vue3介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87"><span class="toc-number">1.1.1.</span> <span class="toc-text">性能提升</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96Vue3-0"><span class="toc-number">1.2.</span> <span class="toc-text">获取Vue3.0</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B0%E5%A2%9E%E7%89%B9%E6%80%A7"><span class="toc-number">1.3.</span> <span class="toc-text">新增特性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Fragment%E6%A8%A1%E6%9D%BF%E7%A2%8E%E7%89%87"><span class="toc-number">1.3.1.</span> <span class="toc-text">Fragment模板碎片</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Composition-%E7%BB%84%E5%90%88-API"><span class="toc-number">1.3.2.</span> <span class="toc-text">Composition(组合)API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#h%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0"><span class="toc-number">1.3.3.</span> <span class="toc-text">h渲染函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Teleport%EF%BC%9A%E7%9E%AC%E7%A7%BB%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%8D%E7%BD%AE"><span class="toc-number">1.3.4.</span> <span class="toc-text">Teleport：瞬移组件的位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6%E6%B3%A8%E5%86%8C%E6%96%B9%E5%BC%8F"><span class="toc-number">1.3.5.</span> <span class="toc-text">全局组件注册方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6"><span class="toc-number">1.3.6.</span> <span class="toc-text">函数式组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6"><span class="toc-number">1.3.7.</span> <span class="toc-text">异步组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-for%E4%B8%AD%E4%BD%BF%E7%94%A8ref%E5%B1%9E%E6%80%A7"><span class="toc-number">1.3.8.</span> <span class="toc-text">v-for中使用ref属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-for%E4%B8%8Ev-if%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">1.3.9.</span> <span class="toc-text">v-for与v-if优先级</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4"><span class="toc-number">1.3.10.</span> <span class="toc-text">自定义指令</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#app-config-globalProperties%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7"><span class="toc-number">1.3.11.</span> <span class="toc-text">app.config.globalProperties全局属性</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A7%BB%E9%99%A4%E5%B1%9E%E6%80%A7"><span class="toc-number">1.4.</span> <span class="toc-text">移除属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#children"><span class="toc-number">1.4.1.</span> <span class="toc-text">$children</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#filter%E8%BF%87%E6%BB%A4%E5%99%A8"><span class="toc-number">1.4.2.</span> <span class="toc-text">filter过滤器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vm-set-Vue-set"><span class="toc-number">1.4.3.</span> <span class="toc-text">vm.$set(Vue.set)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vm-on"><span class="toc-number">1.4.4.</span> <span class="toc-text">vm.$on</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">2.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/3d72a2c2.html b/articles/3d72a2c2.html
index 9351e7a4..5b0115da 100644
--- a/articles/3d72a2c2.html
+++ b/articles/3d72a2c2.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:39:02'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_30.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">懒加载</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:39:02.455Z" title="更新于 2024-02-26 19:39:02">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/">图片懒加载</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">764</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>3分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="懒加载"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="懒加载"><a href="#懒加载" class="headerlink" title="懒加载"></a>懒加载</h1><p>页面运行到浏览器，图片是不立即进行加载的。</p>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_30.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">懒加载</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/">图片懒加载</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">764</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>3分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="懒加载"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="懒加载"><a href="#懒加载" class="headerlink" title="懒加载"></a>懒加载</h1><p>页面运行到浏览器，图片是不立即进行加载的。</p>
 <h2 id="懒加载的优势"><a href="#懒加载的优势" class="headerlink" title="懒加载的优势"></a>懒加载的优势</h2><ol>
 <li>保证图片一定能够加载成功，防止破图，增强用户体验。</li>
 <li>有利于性能优化。</li>
@@ -164,7 +164,7 @@ <h2 id="其他屏页面"><a href="#其他屏页面" class="headerlink" title="
 
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&#x27;box&#x27;</span>)[<span class="number">0</span>];</span><br><span class="line"><span class="keyword">var</span> img = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&#x27;img&#x27;</span>)[<span class="number">0</span>];</span><br><span class="line"><span class="keyword">var</span> winH = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">window</span>.<span class="property">onscroll</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> scrollT = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span>;</span><br><span class="line">    <span class="comment">// 判断：首屏高度+滚动条滚去的高度&gt;=图片底部到body的距离</span></span><br><span class="line">    <span class="comment">// 因为图片display:none,不占位,所以js盒模型的13个属性获取不到,故改用其父亲</span></span><br><span class="line">    <span class="keyword">if</span> (winH + scrollT &gt;= img.<span class="property">parentNode</span>.<span class="property">offsetTop</span> + img.<span class="property">parentNode</span>.<span class="property">clientHeight</span>) &#123;</span><br><span class="line">        <span class="title function_">imgLazy</span>();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">imgLazy</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 3.动态创建img标签</span></span><br><span class="line">    <span class="keyword">var</span> oImg = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;img&#x27;</span>);</span><br><span class="line">     <span class="comment">// 4.将真实图片的地址赋值给当前这个临时图片的src</span></span><br><span class="line">    oImg.<span class="property">src</span> = img.<span class="title function_">getAttribute</span>(<span class="string">&#x27;trueSrc&#x27;</span>);</span><br><span class="line">     <span class="comment">// 5.判断当前这个图片资源是否加载成功   </span></span><br><span class="line">    oImg.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        img.<span class="property">src</span> = <span class="variable language_">this</span>.<span class="property">src</span>;</span><br><span class="line">        img.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/3d72a2c2.html">https://fsllala.top/articles/3d72a2c2.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/">图片懒加载</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_30.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/16b55383.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_4.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Dom尺寸与位置</div></div></a></div><div class="next-post pull-right"><a href="/articles/ef0a4464.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_33.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">拖拽</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%87%92%E5%8A%A0%E8%BD%BD"><span class="toc-number">1.</span> <span class="toc-text">懒加载</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%87%92%E5%8A%A0%E8%BD%BD%E7%9A%84%E4%BC%98%E5%8A%BF"><span class="toc-number">1.1.</span> <span class="toc-text">懒加载的优势</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%87%92%E5%8A%A0%E8%BD%BD%E7%9A%84%E5%AE%9E%E7%8E%B0"><span class="toc-number">1.2.</span> <span class="toc-text">懒加载的实现</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A6%96%E5%B1%8F%E9%A1%B5%E9%9D%A2"><span class="toc-number">1.3.</span> <span class="toc-text">首屏页面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E5%B1%8F%E9%A1%B5%E9%9D%A2"><span class="toc-number">1.4.</span> <span class="toc-text">其他屏页面</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/3d72a2c2.html">https://fsllala.top/articles/3d72a2c2.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/">图片懒加载</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_30.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/16b55383.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_4.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Dom尺寸与位置</div></div></a></div><div class="next-post pull-right"><a href="/articles/ef0a4464.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_33.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">拖拽</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%87%92%E5%8A%A0%E8%BD%BD"><span class="toc-number">1.</span> <span class="toc-text">懒加载</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%87%92%E5%8A%A0%E8%BD%BD%E7%9A%84%E4%BC%98%E5%8A%BF"><span class="toc-number">1.1.</span> <span class="toc-text">懒加载的优势</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%87%92%E5%8A%A0%E8%BD%BD%E7%9A%84%E5%AE%9E%E7%8E%B0"><span class="toc-number">1.2.</span> <span class="toc-text">懒加载的实现</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A6%96%E5%B1%8F%E9%A1%B5%E9%9D%A2"><span class="toc-number">1.3.</span> <span class="toc-text">首屏页面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E5%B1%8F%E9%A1%B5%E9%9D%A2"><span class="toc-number">1.4.</span> <span class="toc-text">其他屏页面</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/3ef665a6.html b/articles/3ef665a6.html
index 82d97646..e9cd3fe3 100644
--- a/articles/3ef665a6.html
+++ b/articles/3ef665a6.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:33:23'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">https</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:33:23.113Z" title="更新于 2024-02-26 19:33:23">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/https/">https</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">4.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>15分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="https"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="调研背景"><a href="#调研背景" class="headerlink" title="调研背景"></a>调研背景</h2><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_40.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">https</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.898Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/https/">https</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">4.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>15分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="https"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="调研背景"><a href="#调研背景" class="headerlink" title="调研背景"></a>调研背景</h2><blockquote>
 <p>公司项目打算采用HTTPS来保证数据的安全性。在计划零成本的前提下，看是否可以实现HTTPS。</p>
 </blockquote>
 <h2 id="HTTP与HTTPS区别"><a href="#HTTP与HTTPS区别" class="headerlink" title="HTTP与HTTPS区别"></a>HTTP与HTTPS区别</h2><ul>
@@ -144,7 +144,7 @@ <h2 id="HTTP与HTTPS区别"><a href="#HTTP与HTTPS区别" class="headerlink" tit
 <blockquote>
 <p>HTTPS 并不是一种新的协议，我们可以理解为HTTPS协议 &#x3D; HTTP协议 + SSL&#x2F;TLS协议。通常来说，HTTP 是直接和 TCP 进行通信的。当我们使用  SSL&#x2F;TLS 时，会变成先和  SSL&#x2F;TLS 通信，然后再由  SSL&#x2F;TLS 和 TCP 进行通信。</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/https.png" alt="https"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/https.png" alt="https"></p>
 <h2 id="SSL-x2F-TLS"><a href="#SSL-x2F-TLS" class="headerlink" title="SSL&#x2F;TLS"></a>SSL&#x2F;TLS</h2><blockquote>
 <p>SSL（Secure Sockets Layer）和 TLS（Transport Layer Security）都是网络通信中的加密协议，它们的主要目的是在网络通信中保护传输数据的机密性和完整性。SSL是TLS的前身，TLS是SSL的升级版，这两者之间的区别如下：</p>
 </blockquote>
@@ -157,7 +157,7 @@ <h2 id="SSL-x2F-TLS"><a href="#SSL-x2F-TLS" class="headerlink" title="SSL&#x2F;T
 </ul>
 <p>总之，SSL和TLS协议都是用于在网络上保护数据传输的安全性的加密协议。虽然SSL协议已经不再使用，但TLS协议已经取代了SSL协议，并成为了现代互联网上加密通信的标准。</p>
 <p>注：可以F12，选择Security进行查看单管网站所用的版本；</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/tlsVersion.png" alt="tlsVersion"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/tlsVersion.png" alt="tlsVersion"></p>
 <h2 id="证书颁发机构（CA）"><a href="#证书颁发机构（CA）" class="headerlink" title="证书颁发机构（CA）"></a>证书颁发机构（CA）</h2><ul>
 <li><p>证书颁发机构（Certificate Authority，CA）是一种受信任的第三方实体，它负责验证数字证书中的信息，并将其绑定到公钥上，从而帮助确保证书的真实性和完整性。</p>
 </li>
@@ -204,28 +204,28 @@ <h2 id="内网HTTPS-free"><a href="#内网HTTPS-free" class="headerlink" title="
 <ol>
 <li>mkcert下载：<a target="_blank" rel="noopener" href="https://github.com/FiloSottile/mkcert/releases/tag/v1.4.4">下载链接</a></li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step1.png" alt="mkcert_step1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step1.png" alt="mkcert_step1"></p>
 <ol start="2">
 <li>生成CA（certificate authority，即证书颁发机构）：输入cmd，初次安装mkcert</li>
 </ol>
 <p>输入<code>mkcert-v1.4.4-windows-amd64 -install</code> 命令 ，安装mkcert。将CA证书加入本地可信CA，使用此命令，就能帮助我们将mkcert使用的根证书加入了本地可信CA中，以后由该CA签发的证书在本地都是可信的。卸载命令 <code>mkcert-v1.4.4-windows-amd64 -uninstall</code></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step2.png" alt="mkcert_step2"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step2.png" alt="mkcert_step2"></p>
 <ol start="3">
 <li>安装成功，提示创建一个新的本地CA，本地CA现在已安装在系统信任存储中。</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step3.png" alt="mkcert_step3"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step3.png" alt="mkcert_step3"></p>
 <ol start="4">
 <li>测试mkcert是否安装成功</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step4.png" alt="mkcert_step4"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step4.png" alt="mkcert_step4"></p>
 <ol start="5">
 <li>查看CA证书存放位置</li>
 </ol>
 <p>输入<code>mkcert-v1.4.4-windows-amd64.exe -CAROOT</code>命令</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step5.png" alt="mkcert_step5"></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step5_1.png" alt="mkcert_step5_1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step5.png" alt="mkcert_step5"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step5_1.png" alt="mkcert_step5_1"></p>
 <p>按“Windows键+R”调出运行框，输入certmgr.msc命令。打开证书控制台。</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step5_2.png" alt="mkcert_step5_2"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step5_2.png" alt="mkcert_step5_2"></p>
 <ol start="6">
 <li>生成自签证书,可供局域网内使用其他主机访问。</li>
 </ol>
@@ -249,30 +249,30 @@ <h2 id="内网HTTPS-free"><a href="#内网HTTPS-free" class="headerlink" title="
 </blockquote>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mkcert-v1<span class="number">.4</span><span class="number">.4</span>-windows-amd64.<span class="property">exe</span> <span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span> <span class="number">192.168</span><span class="number">.11</span><span class="number">.242</span> fsllala.<span class="property">philisense</span>.<span class="property">com</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step6.png" alt="mkcert_step6"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step6.png" alt="mkcert_step6"></p>
 <p>在mkcert软件同目录下，生成了自签证书。如图所示。</p>
 <blockquote>
 <p>上述命令会自动使用第2步创建的CA生成证书文件，其中<code>xxx.pem</code>为证书，<code>xxx-key.pem</code>为私钥。生成了证书和私钥以后，就可以在web服务器开启https了。</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step6_1.png" alt="mkcert_step6_1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step6_1.png" alt="mkcert_step6_1"></p>
 <ol start="7">
 <li>通过nginx搭建web服务器并开启https</li>
 </ol>
 <figure class="highlight js"><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"><span class="comment">//nginx常用命令</span></span><br><span class="line">start nginx 开启</span><br><span class="line">nginx -s stop 停止</span><br><span class="line">nginx -s reload 重新加载</span><br></pre></td></tr></table></figure>
 
-<p>修改nginx.conf文件中的证书和私钥的路径，别的暂时不做修改。<img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step7.png" alt="mkcert_step7"></p>
+<p>修改nginx.conf文件中的证书和私钥的路径，别的暂时不做修改。<img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step7.png" alt="mkcert_step7"></p>
 <p>进入nginx文件夹，开启nginx</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step7_1.png" alt="mkcert_step7_1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step7_1.png" alt="mkcert_step7_1"></p>
 <ol start="8">
 <li>访问搭建的服务</li>
 </ol>
 <p>通过步骤6配置的IP进行访问，这里经测试，目前127.0.0.1:443和fsllala.philisense.com:443目前不能访问。</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step8.png" alt="mkcert_step8"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step8.png" alt="mkcert_step8"></p>
 <p>将vue项目通过<code>npm run build</code>进行打包，然后将dist文件下中的打包文件放到nginx的html目录中</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step8_1.png" alt="mkcert_step8_1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step8_1.png" alt="mkcert_step8_1"></p>
 <p>再次通过步骤6配置的IP进行访问</p>
 <p>注：这里可能会遇到<code>Invalid Host header</code>的错误，<a target="_blank" rel="noopener" href="https://www.cnblogs.com/z937741304/p/10536237.html">解决方法</a></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step8_2.png" alt="mkcert_step8_2"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step8_2.png" alt="mkcert_step8_2"></p>
 <blockquote>
 <p>这里可以看到警告，意思大概为：请求并未升级到https，因为访问地址是ip地址，应该采用域名进行https访问。</p>
 </blockquote>
@@ -281,20 +281,20 @@ <h2 id="内网HTTPS-free"><a href="#内网HTTPS-free" class="headerlink" title="
 </ol>
 <p>因为网上没有特定的概念词语，因此我这边总结的标题是本地开发指定 Host，但其实简单点就是：<code>localhost -&gt; devlopment.com</code>。</p>
 <p>通过win+R，然后输入<code>C:\Windows\System32\drivers\etc</code>，可以找到hosts文件</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step9.png" alt="mkcert_step9"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step9.png" alt="mkcert_step9"></p>
 <p>然后将步骤6中的域名与本地ip进行映射</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step9_1.png" alt="mkcert_step9_1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step9_1.png" alt="mkcert_step9_1"></p>
 <p>稍等片刻，然后进行域名访问(这里不能挂代理，不然会访问不了)，可以看到，没有上面IP的提示了。</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step9_2.png" alt="mkcert_step9_2"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step9_2.png" alt="mkcert_step9_2"></p>
 <ol start="10">
 <li>此时用局域网的<strong>另一台电脑</strong>进行访问，通过<code>https://192.168.11.242/#/</code>可以进行访问，通过<code>https://fsllala.philisense.com/#/</code>不能进行访问。</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/unsafe.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/unsafe.png"></p>
 <p>可以看到另一台电脑上显示此证书是不安全的，因为我们用的证书是自签的，而不是公认的CA。我们需要将第2步产生的CA：</p>
 <p><code>rootCA-key.pem</code> 和 <code>rootCA.pem</code>，将 <code>rootCA.pem</code> 复制到 另一台PC 上，并将其后缀改为 <code>.crt</code>。</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/rootCA.webp" alt="rootCA"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/rootCA.webp" alt="rootCA"></p>
 <p>双击 <code>rootCA.crt</code>，根据提示安装证书，步骤如下：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/rootCA_install.webp" alt="rootCA_install"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/rootCA_install.webp" alt="rootCA_install"></p>
 <p>重启浏览器再次访问，可以看到连接已经变为安全。</p>
 <ol start="11">
 <li>另一台机器使用域名进行访问</li>
@@ -304,26 +304,26 @@ <h2 id="内网HTTPS-free"><a href="#内网HTTPS-free" class="headerlink" title="
 <li>接口全部不能通信</li>
 </ol>
 <p>因为HTTP和HTTPS是两个不同的协议，所以两者不能进行通信。项目虽然是HTTPS了，但是接口都噶了，肯定是不行的，所以需要通过nginx进行接口的代理，将原来的HTTP接口，反向代理成HTTPS接口。</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step12.png" alt="mkcert_step12"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step12.png" alt="mkcert_step12"></p>
 <ol start="13">
 <li>反向代理 接口HTTP为HTTPS，WS为WSS</li>
 </ol>
 <p>因为项目用到了HTTP和WS，所以都需要进行代理：以下代码意思为：接口中带有<code>/fsl/</code>的都会走<code>http://192.168.13.102:9003/</code>代理</p>
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">server &#123;</span><br><span class="line">   listen       <span class="number">443</span> ssl;</span><br><span class="line">   server_name  localhost;</span><br><span class="line"></span><br><span class="line">#    ssl_certificate      cert.<span class="property">pem</span>;</span><br><span class="line">#    ssl_certificate_key  cert.<span class="property">key</span>;</span><br><span class="line">   #证书</span><br><span class="line">   ssl_certificate /mkcert2/<span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span>+<span class="number">2.</span>pem;</span><br><span class="line">   #私钥</span><br><span class="line">   ssl_certificate_key /mkcert2/<span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span>+<span class="number">2</span>-key.<span class="property">pem</span>;</span><br><span class="line"></span><br><span class="line">   ssl_session_cache    <span class="attr">shared</span>:<span class="attr">SSL</span>:1m;</span><br><span class="line">   ssl_session_timeout  5m;</span><br><span class="line"></span><br><span class="line">   ssl_ciphers  <span class="attr">HIGH</span>:!<span class="attr">aNULL</span>:!<span class="title class_">MD5</span>;</span><br><span class="line">   ssl_prefer_server_ciphers  on;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">location /fsl/ &#123;</span><br><span class="line"># root   html;</span><br><span class="line"># index  index.<span class="property">html</span> index.<span class="property">htm</span>;</span><br><span class="line">    proxy_pass <span class="attr">http</span>:<span class="comment">//192.168.13.102:9003/; #现接口地址</span></span><br><span class="line"></span><br><span class="line"># websocket</span><br><span class="line"># proxy_pass <span class="attr">http</span>:<span class="comment">//192.168.13.102:9003/;  #websocket服务器</span></span><br><span class="line">proxy_http_version <span class="number">1.1</span>;</span><br><span class="line">proxy_set_header <span class="title class_">Upgrade</span> $http_upgrade;</span><br><span class="line">proxy_set_header <span class="title class_">Connection</span> <span class="string">&quot;upgrade&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">   location / &#123;</span><br><span class="line">       root   html;</span><br><span class="line">       index  index.<span class="property">html</span> index.<span class="property">htm</span>;</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step13.png" alt="mkcert_step13"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step13.png" alt="mkcert_step13"></p>
 <p>然后将vue项目中的接口服务地址和协议进行修改，如下图所示：</p>
 <blockquote>
 <p>需要修改IP，https&#x2F;wss、端口号、进行nginx代理的关键字(&#x2F;fsl&#x2F;)</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step13_1.png" alt="mkcert_step13_1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step13_1.png" alt="mkcert_step13_1"></p>
 <p>然后将vue进行打包，放到nginx下的html目录下；nginx通过<code>nginx -s reload</code>进行重新加载。</p>
 <ol start="14">
 <li>通过上述映射的域名(<a target="_blank" rel="noopener" href="https://fsllala.philisense.com)进行访问/">https://fsllala.philisense.com)进行访问</a></li>
 </ol>
 <p>可能会出现一些图片&#x2F;标乱码的情况，关闭浏览器，重新打开即可。</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step14.png" alt="mkcert_step14"></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step14_1.png" alt="mkcert_step14_1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step14.png" alt="mkcert_step14"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mkcert_step14_1.png" alt="mkcert_step14_1"></p>
 <p>可以看到，此时接口(http、ws)均进行了代理，可以进行正常的访问。</p>
 <h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul>
 <li>虽然可以将 SSL&#x2F;TLS 证书与 IP 地址绑定，但出于安全和兼容性考虑，建议尽可能使用域名来保护您的应用程序；</li>
@@ -334,9 +334,9 @@ <h2 id="外网HTTPS"><a href="#外网HTTPS" class="headerlink" title="外网HTTP
 <p>外网免费HTTPS是不能绑定IP的，无论是上面提及的Let’s Encrypt，还是腾讯云，阿里云等。</p>
 </blockquote>
 <h3 id="腾讯云"><a href="#腾讯云" class="headerlink" title="腾讯云"></a>腾讯云</h3><p><a target="_blank" rel="noopener" href="https://cloud.tencent.com/document/product/400/89868">免费SSL</a></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/tencentSSL.png" alt="tencentSSL"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/tencentSSL.png" alt="tencentSSL"></p>
 <h3 id="阿里云"><a href="#阿里云" class="headerlink" title="阿里云"></a>阿里云</h3><p><a target="_blank" rel="noopener" href="https://help.aliyun.com/document_detail/205510.html?spm=5176.21213303.J_6704733920.9.411353c9TKatgq&scm=20140722.S_help@@%E6%96%87%E6%A1%A3@@205510._.ID_help@@%E6%96%87%E6%A1%A3@@205510-RL_%E5%85%8D%E8%B4%B9ssl%E8%AF%81%E4%B9%A6-LOC_main-OR_ser-V_2-RK_rerank-P0_0">免费SSL</a></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/aliSSL.png" alt="aliSSL"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/aliSSL.png" alt="aliSSL"></p>
 <h2 id="相关文献"><a href="#相关文献" class="headerlink" title="相关文献"></a>相关文献</h2><ul>
 <li><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_34375473/article/details/122310838">为什么 HTTPS 比 HTTP 更安全？HTTPS 如何保证数据传输安全性</a></li>
 <li><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_36631580/article/details/126272277?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-126272277-blog-122310838.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-126272277-blog-122310838.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&utm_relevant_index=6">HTTPS为什么是安全的</a></li>
@@ -357,7 +357,7 @@ <h2 id="相关文献"><a href="#相关文献" class="headerlink" title="相关
 <li><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_33313155/article/details/124746273">windows使用Certbot配置nginx的https证书</a></li>
 <li><a target="_blank" rel="noopener" href="https://www.51cto.com/article/750673.html">如何使用 Nginx 和 Certbot 创建一个安全的 Web 服务器</a></li>
 </ul>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/3ef665a6.html">https://fsllala.top/articles/3ef665a6.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/https/">https</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/7067fd0d.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_16.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">TypeScript</div></div></a></div><div class="next-post pull-right"><a href="/articles/65b69107.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Nginx</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B0%83%E7%A0%94%E8%83%8C%E6%99%AF"><span class="toc-number">1.</span> <span class="toc-text">调研背景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTTP%E4%B8%8EHTTPS%E5%8C%BA%E5%88%AB"><span class="toc-number">2.</span> <span class="toc-text">HTTP与HTTPS区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SSL-x2F-TLS"><span class="toc-number">3.</span> <span class="toc-text">SSL&#x2F;TLS</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%81%E4%B9%A6%E9%A2%81%E5%8F%91%E6%9C%BA%E6%9E%84%EF%BC%88CA%EF%BC%89"><span class="toc-number">4.</span> <span class="toc-text">证书颁发机构（CA）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mkcert"><span class="toc-number">5.</span> <span class="toc-text">mkcert</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Let%E2%80%99s-Encrypt"><span class="toc-number">6.</span> <span class="toc-text">Let’s Encrypt</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mkcert%E4%B8%8ELet%E2%80%99s-Encrypt%E5%8C%BA%E5%88%AB"><span class="toc-number">7.</span> <span class="toc-text">mkcert与Let’s Encrypt区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B3%E4%BA%8EIP%E7%BB%91%E5%AE%9A"><span class="toc-number">8.</span> <span class="toc-text">关于IP绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Let%E2%80%99s-Encrypt-1"><span class="toc-number">8.1.</span> <span class="toc-text">Let’s Encrypt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#mkcert-1"><span class="toc-number">8.2.</span> <span class="toc-text">mkcert</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83"><span class="toc-number">9.</span> <span class="toc-text">开发环境</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%85%E7%BD%91HTTPS-free"><span class="toc-number">10.</span> <span class="toc-text">内网HTTPS(free)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">10.1.</span> <span class="toc-text">总结</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%96%E7%BD%91HTTPS"><span class="toc-number">11.</span> <span class="toc-text">外网HTTPS</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%85%BE%E8%AE%AF%E4%BA%91"><span class="toc-number">11.1.</span> <span class="toc-text">腾讯云</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%98%BF%E9%87%8C%E4%BA%91"><span class="toc-number">11.2.</span> <span class="toc-text">阿里云</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%B8%E5%85%B3%E6%96%87%E7%8C%AE"><span class="toc-number">12.</span> <span class="toc-text">相关文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/3ef665a6.html">https://fsllala.top/articles/3ef665a6.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/https/">https</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_40.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/7067fd0d.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_16.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">TypeScript</div></div></a></div><div class="next-post pull-right"><a href="/articles/65b69107.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Nginx</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B0%83%E7%A0%94%E8%83%8C%E6%99%AF"><span class="toc-number">1.</span> <span class="toc-text">调研背景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTTP%E4%B8%8EHTTPS%E5%8C%BA%E5%88%AB"><span class="toc-number">2.</span> <span class="toc-text">HTTP与HTTPS区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SSL-x2F-TLS"><span class="toc-number">3.</span> <span class="toc-text">SSL&#x2F;TLS</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%81%E4%B9%A6%E9%A2%81%E5%8F%91%E6%9C%BA%E6%9E%84%EF%BC%88CA%EF%BC%89"><span class="toc-number">4.</span> <span class="toc-text">证书颁发机构（CA）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mkcert"><span class="toc-number">5.</span> <span class="toc-text">mkcert</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Let%E2%80%99s-Encrypt"><span class="toc-number">6.</span> <span class="toc-text">Let’s Encrypt</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mkcert%E4%B8%8ELet%E2%80%99s-Encrypt%E5%8C%BA%E5%88%AB"><span class="toc-number">7.</span> <span class="toc-text">mkcert与Let’s Encrypt区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B3%E4%BA%8EIP%E7%BB%91%E5%AE%9A"><span class="toc-number">8.</span> <span class="toc-text">关于IP绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Let%E2%80%99s-Encrypt-1"><span class="toc-number">8.1.</span> <span class="toc-text">Let’s Encrypt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#mkcert-1"><span class="toc-number">8.2.</span> <span class="toc-text">mkcert</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83"><span class="toc-number">9.</span> <span class="toc-text">开发环境</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%85%E7%BD%91HTTPS-free"><span class="toc-number">10.</span> <span class="toc-text">内网HTTPS(free)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">10.1.</span> <span class="toc-text">总结</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%96%E7%BD%91HTTPS"><span class="toc-number">11.</span> <span class="toc-text">外网HTTPS</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%85%BE%E8%AE%AF%E4%BA%91"><span class="toc-number">11.1.</span> <span class="toc-text">腾讯云</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%98%BF%E9%87%8C%E4%BA%91"><span class="toc-number">11.2.</span> <span class="toc-text">阿里云</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%B8%E5%85%B3%E6%96%87%E7%8C%AE"><span class="toc-number">12.</span> <span class="toc-text">相关文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/42ce80b9.html b/articles/42ce80b9.html
index e9826df6..ae6f1d8b 100644
--- a/articles/42ce80b9.html
+++ b/articles/42ce80b9.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:37:21'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">websocket</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:37:21.546Z" title="更新于 2024-02-26 19:37:21">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/websocket/">websocket</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="websocket"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="websocket"><a href="#websocket" class="headerlink" title="websocket"></a>websocket</h1><h2 id="一、websocket是什么"><a href="#一、websocket是什么" class="headerlink" title="一、websocket是什么"></a>一、websocket是什么</h2><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_26.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">websocket</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/websocket/">websocket</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="websocket"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="websocket"><a href="#websocket" class="headerlink" title="websocket"></a>websocket</h1><h2 id="一、websocket是什么"><a href="#一、websocket是什么" class="headerlink" title="一、websocket是什么"></a>一、websocket是什么</h2><ul>
 <li>websocket是一种网络通信协议，是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。</li>
 <li>在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。（维基百科）</li>
 </ul>
@@ -196,7 +196,7 @@ <h2 id="四、websocket的其他特点"><a href="#四、websocket的其他特点
 </ol>
 <h2 id="五、创建websocket对象"><a href="#五、创建websocket对象" class="headerlink" title="五、创建websocket对象"></a>五、创建websocket对象</h2><figure class="highlight js"><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"><span class="comment">// url, 指定连接的 URL</span></span><br><span class="line"><span class="comment">// protocol 是可选的，指定可接受的子协议。</span></span><br><span class="line"><span class="keyword">let</span> <span class="title class_">Socket</span> = <span class="keyword">new</span> <span class="title class_">WebSocket</span>(url, [protocol] );</span><br></pre></td></tr></table></figure>
 
-<h2 id="六、websocket属性"><a href="#六、websocket属性" class="headerlink" title="六、websocket属性"></a>六、websocket属性</h2><p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://s4.ax1x.com/2022/01/18/7wUE8A.png" alt="websocket state">*</p>
+<h2 id="六、websocket属性"><a href="#六、websocket属性" class="headerlink" title="六、websocket属性"></a>六、websocket属性</h2><p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://s4.ax1x.com/2022/01/18/7wUE8A.png" alt="websocket state">*</p>
 <h2 id="七、websocket事件"><a href="#七、websocket事件" class="headerlink" title="七、websocket事件"></a>七、websocket事件</h2><table>
 <thead>
 <tr>
@@ -280,7 +280,7 @@ <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考
 <li><a target="_blank" rel="noopener" href="https://juejin.cn/post/7020964728386093093#heading-8">WebSocket 原理</a></li>
 <li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903606211215373">WebSocket 原理</a></li>
 </ul>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/42ce80b9.html">https://fsllala.top/articles/42ce80b9.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/websocket/">websocket</a><a class="post-meta__tags" href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/">心跳重连机制</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/957893b.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">异步处理</div></div></a></div><div class="next-post pull-right"><a href="/articles/feee8227.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_14.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">this</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#websocket"><span class="toc-number">1.</span> <span class="toc-text">websocket</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%E3%80%81websocket%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">1.1.</span> <span class="toc-text">一、websocket是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8C%E3%80%81websocket%E4%B8%8Ehttp%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE%E7%9A%84%E8%81%94%E7%B3%BB%E4%B8%8E%E5%8C%BA%E5%88%AB"><span class="toc-number">1.2.</span> <span class="toc-text">二、websocket与http网络协议的联系与区别</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%94%E7%B3%BB%EF%BC%9A"><span class="toc-number">1.2.1.</span> <span class="toc-text">联系：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8C%BA%E5%88%AB%EF%BC%9A"><span class="toc-number">1.2.2.</span> <span class="toc-text">区别：</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E3%80%81long-pull-%E4%B8%8Eajax-%E8%BD%AE%E8%AF%A2"><span class="toc-number">1.3.</span> <span class="toc-text">三、long pull 与ajax 轮询</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#ajax%E8%BD%AE%E8%AF%A2%EF%BC%9A"><span class="toc-number">1.3.1.</span> <span class="toc-text">ajax轮询：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%83%85%E6%99%AF%E5%86%8D%E7%8E%B0%EF%BC%9A"><span class="toc-number">1.3.1.1.</span> <span class="toc-text">情景再现：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#long-pull"><span class="toc-number">1.4.</span> <span class="toc-text">long pull:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%83%85%E6%99%AF%E5%86%8D%E7%8E%B0%EF%BC%9A-1"><span class="toc-number">1.4.0.1.</span> <span class="toc-text">情景再现：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#websocket-1"><span class="toc-number">1.5.</span> <span class="toc-text">websocket</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%83%85%E6%99%AF%E5%86%8D%E7%8E%B0%EF%BC%9A-2"><span class="toc-number">1.5.0.1.</span> <span class="toc-text">情景再现：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9B%E3%80%81websocket%E7%9A%84%E5%85%B6%E4%BB%96%E7%89%B9%E7%82%B9"><span class="toc-number">1.6.</span> <span class="toc-text">四、websocket的其他特点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%94%E3%80%81%E5%88%9B%E5%BB%BAwebsocket%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.7.</span> <span class="toc-text">五、创建websocket对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%AD%E3%80%81websocket%E5%B1%9E%E6%80%A7"><span class="toc-number">1.8.</span> <span class="toc-text">六、websocket属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%83%E3%80%81websocket%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.9.</span> <span class="toc-text">七、websocket事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%AB%E3%80%81websocket%E6%96%B9%E6%B3%95"><span class="toc-number">1.10.</span> <span class="toc-text">八、websocket方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B9%9D%E3%80%81websocket%E5%AE%9E%E4%BE%8B"><span class="toc-number">1.11.</span> <span class="toc-text">九、websocket实例</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6"><span class="toc-number">2.</span> <span class="toc-text">心跳重连机制</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E6%A6%82%E5%BF%B5%EF%BC%9A"><span class="toc-number">2.1.</span> <span class="toc-text">一、概念：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E5%BF%83%E8%B7%B3%E5%8C%85%E6%A6%82%E5%BF%B5%EF%BC%9A"><span class="toc-number">2.2.</span> <span class="toc-text">二、心跳包概念：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E5%BF%83%E8%B7%B3%E6%9C%BA%E5%88%B6%E6%A6%82%E5%BF%B5%EF%BC%9A"><span class="toc-number">2.3.</span> <span class="toc-text">三、心跳机制概念：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9B%E3%80%81%E5%AE%9E%E7%8E%B0%E5%BF%83%E8%B7%B3%E6%A3%80%E6%B5%8B%E7%9A%84%E6%80%9D%E8%B7%AF%EF%BC%9A"><span class="toc-number">2.4.</span> <span class="toc-text">四、实现心跳检测的思路：</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">3.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/42ce80b9.html">https://fsllala.top/articles/42ce80b9.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/websocket/">websocket</a><a class="post-meta__tags" href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/">心跳重连机制</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_26.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/957893b.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_34.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">异步处理</div></div></a></div><div class="next-post pull-right"><a href="/articles/feee8227.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_14.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">this</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#websocket"><span class="toc-number">1.</span> <span class="toc-text">websocket</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%E3%80%81websocket%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">1.1.</span> <span class="toc-text">一、websocket是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8C%E3%80%81websocket%E4%B8%8Ehttp%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE%E7%9A%84%E8%81%94%E7%B3%BB%E4%B8%8E%E5%8C%BA%E5%88%AB"><span class="toc-number">1.2.</span> <span class="toc-text">二、websocket与http网络协议的联系与区别</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%94%E7%B3%BB%EF%BC%9A"><span class="toc-number">1.2.1.</span> <span class="toc-text">联系：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8C%BA%E5%88%AB%EF%BC%9A"><span class="toc-number">1.2.2.</span> <span class="toc-text">区别：</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E3%80%81long-pull-%E4%B8%8Eajax-%E8%BD%AE%E8%AF%A2"><span class="toc-number">1.3.</span> <span class="toc-text">三、long pull 与ajax 轮询</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#ajax%E8%BD%AE%E8%AF%A2%EF%BC%9A"><span class="toc-number">1.3.1.</span> <span class="toc-text">ajax轮询：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%83%85%E6%99%AF%E5%86%8D%E7%8E%B0%EF%BC%9A"><span class="toc-number">1.3.1.1.</span> <span class="toc-text">情景再现：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#long-pull"><span class="toc-number">1.4.</span> <span class="toc-text">long pull:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%83%85%E6%99%AF%E5%86%8D%E7%8E%B0%EF%BC%9A-1"><span class="toc-number">1.4.0.1.</span> <span class="toc-text">情景再现：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#websocket-1"><span class="toc-number">1.5.</span> <span class="toc-text">websocket</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%83%85%E6%99%AF%E5%86%8D%E7%8E%B0%EF%BC%9A-2"><span class="toc-number">1.5.0.1.</span> <span class="toc-text">情景再现：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9B%E3%80%81websocket%E7%9A%84%E5%85%B6%E4%BB%96%E7%89%B9%E7%82%B9"><span class="toc-number">1.6.</span> <span class="toc-text">四、websocket的其他特点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%94%E3%80%81%E5%88%9B%E5%BB%BAwebsocket%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.7.</span> <span class="toc-text">五、创建websocket对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%AD%E3%80%81websocket%E5%B1%9E%E6%80%A7"><span class="toc-number">1.8.</span> <span class="toc-text">六、websocket属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%83%E3%80%81websocket%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.9.</span> <span class="toc-text">七、websocket事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%AB%E3%80%81websocket%E6%96%B9%E6%B3%95"><span class="toc-number">1.10.</span> <span class="toc-text">八、websocket方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B9%9D%E3%80%81websocket%E5%AE%9E%E4%BE%8B"><span class="toc-number">1.11.</span> <span class="toc-text">九、websocket实例</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6"><span class="toc-number">2.</span> <span class="toc-text">心跳重连机制</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E6%A6%82%E5%BF%B5%EF%BC%9A"><span class="toc-number">2.1.</span> <span class="toc-text">一、概念：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E5%BF%83%E8%B7%B3%E5%8C%85%E6%A6%82%E5%BF%B5%EF%BC%9A"><span class="toc-number">2.2.</span> <span class="toc-text">二、心跳包概念：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E5%BF%83%E8%B7%B3%E6%9C%BA%E5%88%B6%E6%A6%82%E5%BF%B5%EF%BC%9A"><span class="toc-number">2.3.</span> <span class="toc-text">三、心跳机制概念：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9B%E3%80%81%E5%AE%9E%E7%8E%B0%E5%BF%83%E8%B7%B3%E6%A3%80%E6%B5%8B%E7%9A%84%E6%80%9D%E8%B7%AF%EF%BC%9A"><span class="toc-number">2.4.</span> <span class="toc-text">四、实现心跳检测的思路：</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">3.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/459aa16c.html b/articles/459aa16c.html
index 8aa3a07e..0a4e0797 100644
--- a/articles/459aa16c.html
+++ b/articles/459aa16c.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:36:55'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_24.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 setup参数</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:36:55.449Z" title="更新于 2024-02-26 19:36:55">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3-setup%E5%8F%82%E6%95%B0/">Vue3 setup参数</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>5分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 setup参数"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="setup"><a href="#setup" class="headerlink" title="setup"></a>setup</h2><h3 id="Vue2中的组件传值"><a href="#Vue2中的组件传值" class="headerlink" title="Vue2中的组件传值"></a>Vue2中的组件传值</h3><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_24.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 setup参数</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3-setup%E5%8F%82%E6%95%B0/">Vue3 setup参数</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>5分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 setup参数"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="setup"><a href="#setup" class="headerlink" title="setup"></a>setup</h2><h3 id="Vue2中的组件传值"><a href="#Vue2中的组件传值" class="headerlink" title="Vue2中的组件传值"></a>Vue2中的组件传值</h3><blockquote>
 <p>父传子 $attrs</p>
 </blockquote>
 <figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">v-child</span> <span class="attr">msg</span>=<span class="string">&quot;hello&quot;</span> <span class="attr">school</span>=<span class="string">&quot;vue2父传子&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">v-child</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> vChild <span class="keyword">from</span> <span class="string">&quot;./theChild.vue&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">components</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        vChild</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
@@ -149,7 +149,7 @@
 <p>当子组件去掉 props，即不接收父组件 传过来的值时 this上的**$attrs**有父组件传过来的值；</p>
 <p>结论：vue2中<code>vue实例</code>中的**$attrs**可以<code>捡漏</code>父组件传过来，但<code>props</code>未接收的数据；</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845866917v2fcz.png" alt="父传子Vue2"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656845866917v2fcz.png" alt="父传子Vue2"></p>
 <h3 id="vue3中的组件传值"><a href="#vue3中的组件传值" class="headerlink" title="vue3中的组件传值"></a>vue3中的组件传值</h3><blockquote>
 <p>父传子</p>
 </blockquote>
@@ -177,7 +177,7 @@ <h3 id="vue3中的组件传值"><a href="#vue3中的组件传值" class="headerl
 </blockquote>
 <figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//子组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is child<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;childToPatent&quot;</span>&gt;</span>子传父<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">props</span>: [<span class="string">&quot;msg&quot;</span>,<span class="string">&quot;school&quot;</span>],</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// console.log(context); //上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> <span class="title function_">childToPatent</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        context.<span class="title function_">emit</span>(<span class="string">&quot;lala&quot;</span>,<span class="number">666</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        childToPatent,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845934916v3fcz.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656845934916v3fcz.png"></p>
 <blockquote>
 <p>但是这样还是不行滴，会出提示的，需要在子组件中用 <code>emits</code>解决</p>
 </blockquote>
@@ -192,7 +192,7 @@ <h3 id="vue3中的组件传值"><a href="#vue3中的组件传值" class="headerl
 <p>子组件</p>
 </blockquote>
 <figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is child<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// console.log(context); //上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(context.<span class="property">slots</span>) <span class="comment">//Proxy &#123;_: 1, __vInternal: 1, qwe: ƒ, abc: ƒ&#125;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/459aa16c.html">https://fsllala.top/articles/459aa16c.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/">Vue3 setup参数</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_24.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/bb6c6e3.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_19.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue2与3响应式原理</div></div></a></div><div class="next-post pull-right"><a href="/articles/1c4c16aa.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_21.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3 hook</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#setup"><span class="toc-number">1.</span> <span class="toc-text">setup</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue2%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="toc-number">1.1.</span> <span class="toc-text">Vue2中的组件传值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vue3%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="toc-number">1.2.</span> <span class="toc-text">vue3中的组件传值</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/459aa16c.html">https://fsllala.top/articles/459aa16c.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/">Vue3 setup参数</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_24.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/bb6c6e3.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_19.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue2与3响应式原理</div></div></a></div><div class="next-post pull-right"><a href="/articles/1c4c16aa.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_21.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3 hook</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#setup"><span class="toc-number">1.</span> <span class="toc-text">setup</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue2%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="toc-number">1.1.</span> <span class="toc-text">Vue2中的组件传值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vue3%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="toc-number">1.2.</span> <span class="toc-text">vue3中的组件传值</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/46635768.html b/articles/46635768.html
index 7e8ba57d..0bb6a027 100644
--- a/articles/46635768.html
+++ b/articles/46635768.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:34:51'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs连接MySQL</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:34:51.036Z" title="更新于 2024-02-26 19:34:51">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/mysql/">mysql</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>19分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs连接MySQL"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="NodeJs连接MySQL"><a href="#NodeJs连接MySQL" class="headerlink" title="NodeJs连接MySQL"></a>NodeJs连接MySQL</h1><h2 id="mysql与mysql2"><a href="#mysql与mysql2" class="headerlink" title="mysql与mysql2"></a>mysql与mysql2</h2><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_10.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs连接MySQL</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.895Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/mysql/">mysql</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>19分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs连接MySQL"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="NodeJs连接MySQL"><a href="#NodeJs连接MySQL" class="headerlink" title="NodeJs连接MySQL"></a>NodeJs连接MySQL</h1><h2 id="mysql与mysql2"><a href="#mysql与mysql2" class="headerlink" title="mysql与mysql2"></a>mysql与mysql2</h2><ul>
 <li>如何可以在Node的代码中执行SQL语句呢?这里我们可以借助于两个库：<ul>
 <li>mysql：最早的Node连接MySQL的数据库驱动；</li>
 <li>mysql2：在mysql的基础之上，进行了很多的优化、改进；</li>
@@ -419,7 +419,7 @@ <h3 id="多对多表"><a href="#多对多表" class="headerlink" title="多对
 <p>一个学生可以对应多个课程；反过来：一个课程，可以对应多个学生；称之为：多对多表。</p>
 <p>此时添加数据比较麻烦，需要一个关系表，来进行表的关联</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/sql_moreToMore.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/sql_moreToMore.png"></p>
 <ol>
 <li>创建两张表：学生表，课程表</li>
 </ol>
@@ -490,7 +490,7 @@ <h3 id="设置外键"><a href="#设置外键" class="headerlink" title="设置
 <ol>
 <li>在table1中，右键–&gt;设计表–&gt;添加字段(singer_id)–&gt;保存–&gt;点击”外键”，然后进行如下配置；</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mysql_outKey.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/mysql_outKey.png"></p>
 <ol start="2">
 <li>删除&#x2F;更新时：</li>
 </ol>
@@ -509,7 +509,7 @@ <h3 id="设置外键"><a href="#设置外键" class="headerlink" title="设置
 <li><p>SET NULL：当更新或删除某个记录时，会检查该记录是否有关联的外键记录，有的话，将对应的值设置为NULL；</p>
 </li>
 </ul>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/46635768.html">https://fsllala.top/articles/46635768.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs/">NodeJs</a><a class="post-meta__tags" href="/tags/mysql/">mysql</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/799084bf.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs Koa2</div></div></a></div><div class="next-post pull-right"><a href="/articles/5fc41a6b.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_44.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs 登录凭证</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/73805dbf.html" title="NodeJs起本地服务"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-11-21</div><div class="title">NodeJs起本地服务</div></div></a></div><div><a href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-23</div><div class="title">nvm、npm与nrm</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#NodeJs%E8%BF%9E%E6%8E%A5MySQL"><span class="toc-number">1.</span> <span class="toc-text">NodeJs连接MySQL</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#mysql%E4%B8%8Emysql2"><span class="toc-number">1.1.</span> <span class="toc-text">mysql与mysql2</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mysql2%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">1.2.</span> <span class="toc-text">mysql2的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">1.2.1.</span> <span class="toc-text">基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A2%84%E5%A4%84%E7%90%86%E8%AF%AD%E5%8F%A5%EF%BC%88Prepared-Statement%EF%BC%89"><span class="toc-number">1.2.2.</span> <span class="toc-text">预处理语句（Prepared Statement）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%9E%E6%8E%A5%E6%B1%A0%EF%BC%88Connection-Pools%EF%BC%89"><span class="toc-number">1.2.3.</span> <span class="toc-text">连接池（Connection Pools）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SQL%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.3.</span> <span class="toc-text">SQL数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%97%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.3.1.</span> <span class="toc-text">数字类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A5%E6%9C%9F%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.3.2.</span> <span class="toc-text">日期类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.3.3.</span> <span class="toc-text">字符串类型</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SQL%E8%A1%A8%E7%BA%A6%E6%9D%9F"><span class="toc-number">1.4.</span> <span class="toc-text">SQL表约束</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%94%AE%EF%BC%9APRIMARY-KEY"><span class="toc-number">1.4.1.</span> <span class="toc-text">主键：PRIMARY KEY</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%94%AF%E4%B8%80%EF%BC%9AUNIQUE"><span class="toc-number">1.4.2.</span> <span class="toc-text">唯一：UNIQUE</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8D%E8%83%BD%E4%B8%BA%E7%A9%BA%EF%BC%9ANOT-NULL"><span class="toc-number">1.4.3.</span> <span class="toc-text">不能为空：NOT NULL</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%BB%98%E8%AE%A4%E5%80%BC%EF%BC%9ADEFAULT"><span class="toc-number">1.4.4.</span> <span class="toc-text">默认值：DEFAULT</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%8A%A8%E9%80%92%E5%A2%9E%EF%BC%9AAUTO-INCREMENT"><span class="toc-number">1.4.5.</span> <span class="toc-text">自动递增：AUTO_INCREMENT</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8SQL%E8%AF%AD%E5%8F%A5"><span class="toc-number">1.5.</span> <span class="toc-text">常用SQL语句</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%95%E8%A1%A8"><span class="toc-number">1.5.1.</span> <span class="toc-text">单表</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.1.1.</span> <span class="toc-text">查询</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.1.1.1.</span> <span class="toc-text">基础查询</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#where%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.1.1.2.</span> <span class="toc-text">where查询</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#NULL"><span class="toc-number">1.5.1.1.3.</span> <span class="toc-text">NULL</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%A8%A1%E7%B3%8A%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.1.1.4.</span> <span class="toc-text">模糊查询</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%8E%92%E5%BA%8F"><span class="toc-number">1.5.1.1.5.</span> <span class="toc-text">排序</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%88%86%E9%A1%B5%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.1.1.6.</span> <span class="toc-text">分页查询</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%81%9A%E5%90%88%E5%87%BD%E6%95%B0"><span class="toc-number">1.5.1.1.7.</span> <span class="toc-text">聚合函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#GROUP-BY"><span class="toc-number">1.5.1.1.8.</span> <span class="toc-text">GROUP BY</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A2%9E%E5%8A%A0"><span class="toc-number">1.5.1.2.</span> <span class="toc-text">增加</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%A0%E9%99%A4"><span class="toc-number">1.5.1.3.</span> <span class="toc-text">删除</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9"><span class="toc-number">1.5.1.4.</span> <span class="toc-text">修改</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E5%AF%B9%E5%A4%9A%E8%A1%A8"><span class="toc-number">1.5.2.</span> <span class="toc-text">一对多表</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A4%96%E9%94%AE%E7%BA%A6%E6%9D%9F"><span class="toc-number">1.5.2.1.</span> <span class="toc-text">外键约束</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A4%9A%E8%A1%A8%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.2.2.</span> <span class="toc-text">多表查询</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%B7%A6%E8%BF%9E%E6%8E%A5"><span class="toc-number">1.5.2.2.1.</span> <span class="toc-text">左连接</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%8F%B3%E8%BF%9E%E6%8E%A5"><span class="toc-number">1.5.2.2.2.</span> <span class="toc-text">右连接</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%86%85%E8%BF%9E%E6%8E%A5"><span class="toc-number">1.5.2.2.3.</span> <span class="toc-text">内连接</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%85%A8%E8%BF%9E%E6%8E%A5"><span class="toc-number">1.5.2.2.4.</span> <span class="toc-text">全连接</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#JSON-OBJECT"><span class="toc-number">1.5.2.2.5.</span> <span class="toc-text">JSON_OBJECT()</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%9A%E5%AF%B9%E5%A4%9A%E8%A1%A8"><span class="toc-number">1.5.3.</span> <span class="toc-text">多对多表</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#JSON-ARRAYAGG"><span class="toc-number">1.5.3.1.</span> <span class="toc-text">JSON_ARRAYAGG</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#navicat"><span class="toc-number">1.6.</span> <span class="toc-text">navicat</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%AD%97%E6%AE%B5%E4%B8%BA%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4%E5%88%97"><span class="toc-number">1.6.1.</span> <span class="toc-text">设置字段为自动更新时间列</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%94%AF%E4%B8%80"><span class="toc-number">1.6.2.</span> <span class="toc-text">设置唯一</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%A4%96%E9%94%AE"><span class="toc-number">1.6.3.</span> <span class="toc-text">设置外键</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/46635768.html">https://fsllala.top/articles/46635768.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs/">NodeJs</a><a class="post-meta__tags" href="/tags/mysql/">mysql</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_10.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/799084bf.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_9.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs Koa2</div></div></a></div><div class="next-post pull-right"><a href="/articles/5fc41a6b.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_44.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs 登录凭证</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/73805dbf.html" title="NodeJs起本地服务"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_11.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-11-21</div><div class="title">NodeJs起本地服务</div></div></a></div><div><a href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-23</div><div class="title">nvm、npm与nrm</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#NodeJs%E8%BF%9E%E6%8E%A5MySQL"><span class="toc-number">1.</span> <span class="toc-text">NodeJs连接MySQL</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#mysql%E4%B8%8Emysql2"><span class="toc-number">1.1.</span> <span class="toc-text">mysql与mysql2</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mysql2%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">1.2.</span> <span class="toc-text">mysql2的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">1.2.1.</span> <span class="toc-text">基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A2%84%E5%A4%84%E7%90%86%E8%AF%AD%E5%8F%A5%EF%BC%88Prepared-Statement%EF%BC%89"><span class="toc-number">1.2.2.</span> <span class="toc-text">预处理语句（Prepared Statement）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%9E%E6%8E%A5%E6%B1%A0%EF%BC%88Connection-Pools%EF%BC%89"><span class="toc-number">1.2.3.</span> <span class="toc-text">连接池（Connection Pools）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SQL%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.3.</span> <span class="toc-text">SQL数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%97%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.3.1.</span> <span class="toc-text">数字类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A5%E6%9C%9F%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.3.2.</span> <span class="toc-text">日期类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.3.3.</span> <span class="toc-text">字符串类型</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SQL%E8%A1%A8%E7%BA%A6%E6%9D%9F"><span class="toc-number">1.4.</span> <span class="toc-text">SQL表约束</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%94%AE%EF%BC%9APRIMARY-KEY"><span class="toc-number">1.4.1.</span> <span class="toc-text">主键：PRIMARY KEY</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%94%AF%E4%B8%80%EF%BC%9AUNIQUE"><span class="toc-number">1.4.2.</span> <span class="toc-text">唯一：UNIQUE</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8D%E8%83%BD%E4%B8%BA%E7%A9%BA%EF%BC%9ANOT-NULL"><span class="toc-number">1.4.3.</span> <span class="toc-text">不能为空：NOT NULL</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%BB%98%E8%AE%A4%E5%80%BC%EF%BC%9ADEFAULT"><span class="toc-number">1.4.4.</span> <span class="toc-text">默认值：DEFAULT</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%8A%A8%E9%80%92%E5%A2%9E%EF%BC%9AAUTO-INCREMENT"><span class="toc-number">1.4.5.</span> <span class="toc-text">自动递增：AUTO_INCREMENT</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8SQL%E8%AF%AD%E5%8F%A5"><span class="toc-number">1.5.</span> <span class="toc-text">常用SQL语句</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%95%E8%A1%A8"><span class="toc-number">1.5.1.</span> <span class="toc-text">单表</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.1.1.</span> <span class="toc-text">查询</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.1.1.1.</span> <span class="toc-text">基础查询</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#where%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.1.1.2.</span> <span class="toc-text">where查询</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#NULL"><span class="toc-number">1.5.1.1.3.</span> <span class="toc-text">NULL</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%A8%A1%E7%B3%8A%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.1.1.4.</span> <span class="toc-text">模糊查询</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%8E%92%E5%BA%8F"><span class="toc-number">1.5.1.1.5.</span> <span class="toc-text">排序</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%88%86%E9%A1%B5%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.1.1.6.</span> <span class="toc-text">分页查询</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%81%9A%E5%90%88%E5%87%BD%E6%95%B0"><span class="toc-number">1.5.1.1.7.</span> <span class="toc-text">聚合函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#GROUP-BY"><span class="toc-number">1.5.1.1.8.</span> <span class="toc-text">GROUP BY</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A2%9E%E5%8A%A0"><span class="toc-number">1.5.1.2.</span> <span class="toc-text">增加</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%A0%E9%99%A4"><span class="toc-number">1.5.1.3.</span> <span class="toc-text">删除</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9"><span class="toc-number">1.5.1.4.</span> <span class="toc-text">修改</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E5%AF%B9%E5%A4%9A%E8%A1%A8"><span class="toc-number">1.5.2.</span> <span class="toc-text">一对多表</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A4%96%E9%94%AE%E7%BA%A6%E6%9D%9F"><span class="toc-number">1.5.2.1.</span> <span class="toc-text">外键约束</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A4%9A%E8%A1%A8%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.5.2.2.</span> <span class="toc-text">多表查询</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%B7%A6%E8%BF%9E%E6%8E%A5"><span class="toc-number">1.5.2.2.1.</span> <span class="toc-text">左连接</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%8F%B3%E8%BF%9E%E6%8E%A5"><span class="toc-number">1.5.2.2.2.</span> <span class="toc-text">右连接</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%86%85%E8%BF%9E%E6%8E%A5"><span class="toc-number">1.5.2.2.3.</span> <span class="toc-text">内连接</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%85%A8%E8%BF%9E%E6%8E%A5"><span class="toc-number">1.5.2.2.4.</span> <span class="toc-text">全连接</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#JSON-OBJECT"><span class="toc-number">1.5.2.2.5.</span> <span class="toc-text">JSON_OBJECT()</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%9A%E5%AF%B9%E5%A4%9A%E8%A1%A8"><span class="toc-number">1.5.3.</span> <span class="toc-text">多对多表</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#JSON-ARRAYAGG"><span class="toc-number">1.5.3.1.</span> <span class="toc-text">JSON_ARRAYAGG</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#navicat"><span class="toc-number">1.6.</span> <span class="toc-text">navicat</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%AD%97%E6%AE%B5%E4%B8%BA%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4%E5%88%97"><span class="toc-number">1.6.1.</span> <span class="toc-text">设置字段为自动更新时间列</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%94%AF%E4%B8%80"><span class="toc-number">1.6.2.</span> <span class="toc-text">设置唯一</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%A4%96%E9%94%AE"><span class="toc-number">1.6.3.</span> <span class="toc-text">设置外键</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/4c664111.html b/articles/4c664111.html
index 9aeab186..00632c7d 100644
--- a/articles/4c664111.html
+++ b/articles/4c664111.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:35:18'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_13.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">PhotoShop</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:35:18.938Z" title="更新于 2024-02-26 19:35:18">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/PhotoShop/">PhotoShop</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">122</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>1分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="PhotoShop"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="图片背景设置为透明色"><a href="#图片背景设置为透明色" class="headerlink" title="图片背景设置为透明色"></a>图片背景设置为透明色</h1><ol>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_13.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">PhotoShop</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/PhotoShop/">PhotoShop</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">122</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>1分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="PhotoShop"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="图片背景设置为透明色"><a href="#图片背景设置为透明色" class="headerlink" title="图片背景设置为透明色"></a>图片背景设置为透明色</h1><ol>
 <li>文件–&gt;打开–&gt;图片。</li>
 <li>按住<strong>Ctrl+J</strong>来复制图层。</li>
 <li>选择<strong>魔棒工具</strong>，然后点击图片。</li>
@@ -142,7 +142,7 @@
 <li>将ps中右下角的<strong>背景</strong>的小眼睛去掉</li>
 <li>将图片的格式另存为<strong>PNG</strong>格式（JPG格式的图片背景会默认为白色，所以保存时不能保存为JPG格式）</li>
 </ol>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/4c664111.html">https://fsllala.top/articles/4c664111.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/PhotoShop/">PhotoShop</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_13.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/73805dbf.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs起本地服务</div></div></a></div><div class="next-post pull-right"><a href="/articles/ee7734c7.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_27.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">开机自启</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9B%BE%E7%89%87%E8%83%8C%E6%99%AF%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%80%8F%E6%98%8E%E8%89%B2"><span class="toc-number">1.</span> <span class="toc-text">图片背景设置为透明色</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/4c664111.html">https://fsllala.top/articles/4c664111.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/PhotoShop/">PhotoShop</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_13.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/73805dbf.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_11.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs起本地服务</div></div></a></div><div class="next-post pull-right"><a href="/articles/ee7734c7.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_27.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">开机自启</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9B%BE%E7%89%87%E8%83%8C%E6%99%AF%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%80%8F%E6%98%8E%E8%89%B2"><span class="toc-number">1.</span> <span class="toc-text">图片背景设置为透明色</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/4dee6fea.html b/articles/4dee6fea.html
index 7bd071aa..2c14cba6 100644
--- a/articles/4dee6fea.html
+++ b/articles/4dee6fea.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:39:21'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">模块化规范</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:39:21.291Z" title="更新于 2024-02-26 19:39:21">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/CommonJs/">CommonJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/CommonJs/ES6/">ES6</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>9分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="模块化规范"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="什么是模块化？"><a href="#什么是模块化？" class="headerlink" title="什么是模块化？"></a>什么是模块化？</h1><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_8.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">模块化规范</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.878Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/CommonJs/">CommonJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/CommonJs/ES6/">ES6</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>9分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="模块化规范"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="什么是模块化？"><a href="#什么是模块化？" class="headerlink" title="什么是模块化？"></a>什么是模块化？</h1><ul>
 <li>模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块；</li>
 <li>将一个项目拆分为若干块，每块之间以一定的形式进行通信，而每块内部的内容都是独立的；</li>
 </ul>
@@ -208,7 +208,7 @@ <h4 id="module-exports与exports有什么关系或者区别呢？"><a href="#mod
 <h5 id="module对象"><a href="#module对象" class="headerlink" title="module对象"></a>module对象</h5><blockquote>
 <p>Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是module；</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/module.png" alt="module"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/module.png" alt="module"></p>
 <h5 id="module-exports-对象"><a href="#module-exports-对象" class="headerlink" title="module.exports 对象"></a>module.exports 对象</h5><blockquote>
 <p>module.exports&#x3D;xxx的过程其实是引用赋值(浅拷贝)的过程；exports(也是一个对象)之所以可以导出，就是把exports对象的地址赋值给了module.exports，借助module.exports导出；</p>
 </blockquote>
@@ -295,7 +295,7 @@ <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考
 <li><a target="_blank" rel="noopener" href="https://www.jianshu.com/p/58f49f69a2fb">commonjs 与 ES6 模块化</a></li>
 <li><a target="_blank" rel="noopener" href="https://blog.csdn.net/yezhihaobk/article/details/125225290">Node.js 模块化 module.exports 和 exports 的使用</a></li>
 </ul>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/4dee6fea.html">https://fsllala.top/articles/4dee6fea.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/CommonJs/">CommonJs</a><a class="post-meta__tags" href="/tags/ES6/">ES6</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/7cf6476b.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">nvm、npm与nrm</div></div></a></div><div class="next-post pull-right"><a href="/articles/8ba9ed2d.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs Express</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E6%A8%A1%E5%9D%97%E5%8C%96%EF%BC%9F"><span class="toc-number">1.</span> <span class="toc-text">什么是模块化？</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%E7%9A%84%E5%A5%BD%E5%A4%84%EF%BC%9F"><span class="toc-number">2.</span> <span class="toc-text">模块化的好处？</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96%E8%A7%84%E8%8C%83"><span class="toc-number">3.</span> <span class="toc-text">常用的模块化规范?</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#CommonJs"><span class="toc-number">3.1.</span> <span class="toc-text">CommonJs</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%89%B9%E7%82%B9"><span class="toc-number">3.1.1.</span> <span class="toc-text">特点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B7%A5%E4%BD%9C%E7%8E%AF%E5%A2%83"><span class="toc-number">3.1.2.</span> <span class="toc-text">工作环境</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8"><span class="toc-number">3.1.3.</span> <span class="toc-text">使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8exports-x%E6%9A%B4%E9%9C%B2%EF%BC%9B"><span class="toc-number">3.1.3.1.</span> <span class="toc-text">使用exports.x暴露；</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8module-exports%E6%9A%B4%E9%9C%B2%E5%A4%9A%E4%B8%AA%EF%BC%9B"><span class="toc-number">3.1.3.2.</span> <span class="toc-text">使用module.exports暴露多个；</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8module-exports%E6%9A%B4%E9%9C%B2%E5%8D%95%E4%B8%AA%EF%BC%9B"><span class="toc-number">3.1.3.3.</span> <span class="toc-text">使用module.exports暴露单个；</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#module-exports%E4%B8%8Eexports%E6%9C%89%E4%BB%80%E4%B9%88%E5%85%B3%E7%B3%BB%E6%88%96%E8%80%85%E5%8C%BA%E5%88%AB%E5%91%A2%EF%BC%9F"><span class="toc-number">3.1.3.4.</span> <span class="toc-text">module.exports与exports有什么关系或者区别呢？</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#module%E5%AF%B9%E8%B1%A1"><span class="toc-number">3.1.3.4.1.</span> <span class="toc-text">module对象</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#module-exports-%E5%AF%B9%E8%B1%A1"><span class="toc-number">3.1.3.4.2.</span> <span class="toc-text">module.exports 对象</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6"><span class="toc-number">3.2.</span> <span class="toc-text">ES6</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%89%B9%E7%82%B9-1"><span class="toc-number">3.2.1.</span> <span class="toc-text">特点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B7%A5%E4%BD%9C%E7%8E%AF%E5%A2%83-1"><span class="toc-number">3.2.2.</span> <span class="toc-text">工作环境</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-1"><span class="toc-number">3.2.3.</span> <span class="toc-text">使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8export%E7%9B%B4%E6%8E%A5%E5%AF%BC%E5%87%BA"><span class="toc-number">3.2.3.1.</span> <span class="toc-text">使用export直接导出</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8export%E4%B8%80%E8%B5%B7%E5%AF%BC%E5%87%BA"><span class="toc-number">3.2.3.2.</span> <span class="toc-text">使用export一起导出</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8export-default%E5%AF%BC%E5%87%BA"><span class="toc-number">3.2.3.3.</span> <span class="toc-text">使用export default导出</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B7%B7%E7%94%A8"><span class="toc-number">3.2.3.4.</span> <span class="toc-text">混用</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">4.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/4dee6fea.html">https://fsllala.top/articles/4dee6fea.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/CommonJs/">CommonJs</a><a class="post-meta__tags" href="/tags/ES6/">ES6</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_8.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/7cf6476b.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">nvm、npm与nrm</div></div></a></div><div class="next-post pull-right"><a href="/articles/8ba9ed2d.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_32.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs Express</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E6%A8%A1%E5%9D%97%E5%8C%96%EF%BC%9F"><span class="toc-number">1.</span> <span class="toc-text">什么是模块化？</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%E7%9A%84%E5%A5%BD%E5%A4%84%EF%BC%9F"><span class="toc-number">2.</span> <span class="toc-text">模块化的好处？</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96%E8%A7%84%E8%8C%83"><span class="toc-number">3.</span> <span class="toc-text">常用的模块化规范?</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#CommonJs"><span class="toc-number">3.1.</span> <span class="toc-text">CommonJs</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%89%B9%E7%82%B9"><span class="toc-number">3.1.1.</span> <span class="toc-text">特点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B7%A5%E4%BD%9C%E7%8E%AF%E5%A2%83"><span class="toc-number">3.1.2.</span> <span class="toc-text">工作环境</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8"><span class="toc-number">3.1.3.</span> <span class="toc-text">使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8exports-x%E6%9A%B4%E9%9C%B2%EF%BC%9B"><span class="toc-number">3.1.3.1.</span> <span class="toc-text">使用exports.x暴露；</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8module-exports%E6%9A%B4%E9%9C%B2%E5%A4%9A%E4%B8%AA%EF%BC%9B"><span class="toc-number">3.1.3.2.</span> <span class="toc-text">使用module.exports暴露多个；</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8module-exports%E6%9A%B4%E9%9C%B2%E5%8D%95%E4%B8%AA%EF%BC%9B"><span class="toc-number">3.1.3.3.</span> <span class="toc-text">使用module.exports暴露单个；</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#module-exports%E4%B8%8Eexports%E6%9C%89%E4%BB%80%E4%B9%88%E5%85%B3%E7%B3%BB%E6%88%96%E8%80%85%E5%8C%BA%E5%88%AB%E5%91%A2%EF%BC%9F"><span class="toc-number">3.1.3.4.</span> <span class="toc-text">module.exports与exports有什么关系或者区别呢？</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#module%E5%AF%B9%E8%B1%A1"><span class="toc-number">3.1.3.4.1.</span> <span class="toc-text">module对象</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#module-exports-%E5%AF%B9%E8%B1%A1"><span class="toc-number">3.1.3.4.2.</span> <span class="toc-text">module.exports 对象</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6"><span class="toc-number">3.2.</span> <span class="toc-text">ES6</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%89%B9%E7%82%B9-1"><span class="toc-number">3.2.1.</span> <span class="toc-text">特点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B7%A5%E4%BD%9C%E7%8E%AF%E5%A2%83-1"><span class="toc-number">3.2.2.</span> <span class="toc-text">工作环境</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-1"><span class="toc-number">3.2.3.</span> <span class="toc-text">使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8export%E7%9B%B4%E6%8E%A5%E5%AF%BC%E5%87%BA"><span class="toc-number">3.2.3.1.</span> <span class="toc-text">使用export直接导出</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8export%E4%B8%80%E8%B5%B7%E5%AF%BC%E5%87%BA"><span class="toc-number">3.2.3.2.</span> <span class="toc-text">使用export一起导出</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8export-default%E5%AF%BC%E5%87%BA"><span class="toc-number">3.2.3.3.</span> <span class="toc-text">使用export default导出</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B7%B7%E7%94%A8"><span class="toc-number">3.2.3.4.</span> <span class="toc-text">混用</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">4.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/5157567c.html b/articles/5157567c.html
index f77588de..9ba6f442 100644
--- a/articles/5157567c.html
+++ b/articles/5157567c.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:33:33'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Koa2实战</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:33:33.444Z" title="更新于 2024-02-26 19:33:33">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/Koa2/">Koa2</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">14.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>63分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Koa2实战"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="koa2项目实战"><a href="#koa2项目实战" class="headerlink" title="koa2项目实战"></a>koa2项目实战</h1><p>本文所有代码已上传：<a target="_blank" rel="noopener" href="https://github.com/fsllala/koa2">github</a></p>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_45.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Koa2实战</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.897Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/Koa2/">Koa2</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">14.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>63分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Koa2实战"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="koa2项目实战"><a href="#koa2项目实战" class="headerlink" title="koa2项目实战"></a>koa2项目实战</h1><p>本文所有代码已上传：<a target="_blank" rel="noopener" href="https://github.com/fsllala/koa2">github</a></p>
 <h2 id="项目的搭建"><a href="#项目的搭建" class="headerlink" title="项目的搭建"></a>项目的搭建</h2><h3 id="目录结构的划分"><a href="#目录结构的划分" class="headerlink" title="目录结构的划分"></a>目录结构的划分</h3><ul>
 <li>按照功能模块划分：例如：控制器(controller)的放在一起；操作数据库(service)的放在一起……</li>
 <li>按照业务模块划分：一个完整的小功能放在一起；</li>
@@ -228,7 +228,7 @@ <h4 id="路由中间件操作数据库拆分"><a href="#路由中间件操作数
 
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// router/user.router.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="comment">// user.controller.js直接导出了一个实例对象,调用其方法;</span></span><br><span class="line"><span class="keyword">const</span> &#123;create&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/user.controller.js&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,create)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/userSign11673224991635.png" alt="userSignin1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/userSign11673224991635.png" alt="userSignin1"></p>
 <blockquote>
 <p>至此，架构已经大致划分完毕：一个接口划分了三层：<strong>router层、controller层、service层</strong>；</p>
 </blockquote>
@@ -251,8 +251,8 @@ <h4 id="插入数据"><a href="#插入数据" class="headerlink" title="插入
 
 <figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// controller/user.controller.js</span></span><br><span class="line"><span class="keyword">const</span> service = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserController</span>&#123;</span><br><span class="line">    <span class="comment">// 因为操作数据库是异步操作的,所以直接用 async 函数; async函数为对象的方法,下面直接module导出了一个对象;</span></span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx,next</span>)&#123;</span><br><span class="line">        <span class="comment">// 获取用户请求传递的参数</span></span><br><span class="line">        <span class="keyword">const</span> user = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">        <span class="comment">// 查询数据</span></span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> service.<span class="title function_">create</span>(user);</span><br><span class="line">        <span class="comment">// 返回数据</span></span><br><span class="line">        ctx.<span class="property">body</span>= result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>= <span class="keyword">new</span> <span class="title class_">UserController</span>(); <span class="comment">//导出的是一个对象(类的实例)</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/userSign21673225049264.png" alt="userSign2"></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/database11673225109224.png" alt="database1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/userSign21673225049264.png" alt="userSign2"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/database11673225109224.png" alt="database1"></p>
 <blockquote>
 <p>以上代码基本实现了用户注册的逻辑，但是如果用户没有传参，或者传入的参数不对，没有做处理；即没有做错误处理；</p>
 </blockquote>
@@ -287,7 +287,7 @@ <h4 id="错误处理"><a href="#错误处理" class="headerlink" title="错误
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">errorHandler</span> = (<span class="params">error,ctx</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">//通过 message接收传过来的错误</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(error.<span class="property">message</span>);</span><br><span class="line"></span><br><span class="line">    ctx.<span class="property">status</span> = <span class="number">404</span>;</span><br><span class="line">    ctx.<span class="property">body</span> = <span class="string">&quot;发生了错误&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = errorHandler;</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/userSign31673225167528.png" alt="userSign3"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/userSign31673225167528.png" alt="userSign3"></p>
 <blockquote>
 <p>但是错误提示语句有很多，最好<code>new Error(xx)</code>里放的是变量，到时候改一个就好了；</p>
 </blockquote>
@@ -347,7 +347,7 @@ <h4 id="密码加密"><a href="#密码加密" class="headerlink" title="密码
 <blockquote>
 <p>注！！！这里在<code>postman</code>测试的时候,密码为数字的时候，会报错。可能是<code>postman</code>的原因，key和value都需要双引号包裹；</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/userSing41673225214071.png" alt="userSing4"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/userSing41673225214071.png" alt="userSing4"></p>
 <h2 id="用户登录接口"><a href="#用户登录接口" class="headerlink" title="用户登录接口"></a>用户登录接口</h2><blockquote>
 <p>写接口的思想是：一开始没有任何限制，然后一点点的往里面添加中间件，来进行限制。这样才好写，而不是一下子就能想那么多；</p>
 </blockquote>
@@ -369,7 +369,7 @@ <h3 id="登录逻辑结构搭建"><a href="#登录逻辑结构搭建" class="hea
 <ul>
 <li><code>postman</code>进行测试</li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/userLogin11673225250527.png" alt="userLogin1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/userLogin11673225250527.png" alt="userLogin1"></p>
 <blockquote>
 <p>壳子套好了，但是现在是个用户就能登录。需要添加登录条件，登录的时候判断用户是否存在，判断用户和密码输入的是否正确。。。</p>
 </blockquote>
@@ -435,8 +435,8 @@ <h4 id="为什么需要登录凭证呢？"><a href="#为什么需要登录凭证
 </ul>
 </li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224477117cookie.png"></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224528691cookie.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1673224477117cookie.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1673224528691cookie.png"></p>
 <blockquote>
 <p>看到了吧？这就是http的无状态，也就是服务器不知道你上一步做了什么，我们必须得有一个办法可以证明我们登录过；</p>
 </blockquote>
@@ -446,7 +446,7 @@ <h4 id="为什么需要登录凭证呢？"><a href="#为什么需要登录凭证
 </ul>
 </li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224500212cookie.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1673224500212cookie.png"></p>
 <ul>
 <li>目前登录凭证有两种：<ul>
 <li><code>cookie+session</code>(逐渐淘汰)</li>
@@ -487,7 +487,7 @@ <h3 id="JWT颁发签名"><a href="#JWT颁发签名" class="headerlink" title="JW
 <ol start="5">
 <li>使用<code>postman</code>进行测试；(填入数据库存在的用户)；</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/token81673958231583.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/token81673958231583.png"></p>
 <ol start="6">
 <li>设计个简单的接口，验证上面写的登录接口；（这一步实际项目不用做，做的话看下一步骤7）</li>
 </ol>
@@ -560,7 +560,7 @@ <h3 id="查询动态列表"><a href="#查询动态列表" class="headerlink" tit
 <p>访问<code>moment/list?size=10&amp;offset=0</code>，进行动态列表数据的分页查询。</p>
 </blockquote>
 <p>但是现在返回的数据，其实仅仅是当前的<code>moment</code>数据表中的数据，不能知道是谁评论的，需要用外键<code>user_id</code>与<code>user</code>表关联起来；</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/koa_momentList1.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/koa_momentList1.png"></p>
 <ul>
 <li>多表查询</li>
 </ul>
@@ -568,7 +568,7 @@ <h3 id="查询动态列表"><a href="#查询动态列表" class="headerlink" tit
 
 <figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="operator">/</span><span class="operator">/</span> 进阶</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">m.id <span class="keyword">as</span> id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span><br><span class="line"><span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,u.id,<span class="string">&#x27;name&#x27;</span>,u.name) <span class="keyword">as</span> userInfo</span><br><span class="line"><span class="keyword">FROM</span> moment <span class="keyword">as</span> m</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `<span class="keyword">user</span>` <span class="keyword">as</span> u <span class="keyword">ON</span> u.id<span class="operator">=</span>m.user_id</span><br><span class="line">LIMIT <span class="number">10</span> <span class="keyword">OFFSET</span> <span class="number">0</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/koa_momentList2.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/koa_momentList2.png"></p>
 <ul>
 <li><code>service</code>文件夹下的<code>moment.service.js</code>，修改查询SQL语句；</li>
 </ul>
@@ -577,7 +577,7 @@ <h3 id="查询动态列表"><a href="#查询动态列表" class="headerlink" tit
 <blockquote>
 <p>访问<code>moment/list?size=10&amp;offset=0</code>，进行动态列表数据的分页查询，查询结果如下图所示</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/koa_momentList3.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/koa_momentList3.png"></p>
 <h3 id="查询动态详情"><a href="#查询动态详情" class="headerlink" title="查询动态详情"></a>查询动态详情</h3><blockquote>
 <p>获取列表某一条数据的详情。</p>
 </blockquote>
@@ -889,7 +889,7 @@ <h3 id="上传头像2"><a href="#上传头像2" class="headerlink" title="上传
 <p>请求<code>/file/avatar2</code>(POST)，文件格式选：form-data(File)，key为avatar2，value为文件；返回结果为：</p>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;code&quot;</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="string">&quot;message&quot;</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">    <span class="string">&quot;data&quot;</span>: <span class="string">&quot;http://192.168.11.242:3000/1698373200499.webp&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 浏览器访问图片地址,能直接访问,则成功;</span></span><br></pre></td></tr></table></figure>
 
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/5157567c.html">https://fsllala.top/articles/5157567c.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs-Koa2/">NodeJs Koa2</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/65b69107.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Nginx</div></div></a></div><div class="next-post pull-right"><a href="/articles/fa0f2f9c.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">网络安全修改</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/799084bf.html" title="NodeJs Koa2"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-12-29</div><div class="title">NodeJs Koa2</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#koa2%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98"><span class="toc-number">1.</span> <span class="toc-text">koa2项目实战</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B9%E7%9B%AE%E7%9A%84%E6%90%AD%E5%BB%BA"><span class="toc-number">1.1.</span> <span class="toc-text">项目的搭建</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%E7%9A%84%E5%88%92%E5%88%86"><span class="toc-number">1.1.1.</span> <span class="toc-text">目录结构的划分</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96"><span class="toc-number">1.1.1.1.</span> <span class="toc-text">安装依赖</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%BF%AB%E6%8D%B7%E5%90%AF%E5%8A%A8"><span class="toc-number">1.1.1.2.</span> <span class="toc-text">设置快捷启动</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6"><span class="toc-number">1.1.1.3.</span> <span class="toc-text">入口文件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%E6%8B%86%E5%88%86"><span class="toc-number">1.1.1.4.</span> <span class="toc-text">入口文件拆分</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">1.1.1.5.</span> <span class="toc-text">配置文件</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.2.</span> <span class="toc-text">用户注册接口</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9E%B6%E6%9E%84%E5%9F%BA%E7%A1%80%E5%86%99%E6%B3%95"><span class="toc-number">1.2.1.</span> <span class="toc-text">架构基础写法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9E%B6%E6%9E%84%E8%BF%9B%E9%98%B6%E5%86%99%E6%B3%95"><span class="toc-number">1.2.2.</span> <span class="toc-text">架构进阶写法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E6%8B%86%E5%88%86"><span class="toc-number">1.2.2.1.</span> <span class="toc-text">路由拆分</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E4%B8%AD%E9%97%B4%E4%BB%B6%E6%8B%86%E5%88%86"><span class="toc-number">1.2.2.2.</span> <span class="toc-text">路由中间件拆分</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E4%B8%AD%E9%97%B4%E4%BB%B6%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E5%BA%93%E6%8B%86%E5%88%86"><span class="toc-number">1.2.2.3.</span> <span class="toc-text">路由中间件操作数据库拆分</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%9E%E6%8E%A5%E6%95%B0%E6%8D%AE%E5%BA%93"><span class="toc-number">1.2.3.</span> <span class="toc-text">连接数据库</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96-1"><span class="toc-number">1.2.3.1.</span> <span class="toc-text">安装依赖</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E8%BF%9E%E6%8E%A5"><span class="toc-number">1.2.3.2.</span> <span class="toc-text">创建连接</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E6%95%B0%E6%8D%AE"><span class="toc-number">1.2.3.3.</span> <span class="toc-text">插入数据</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86"><span class="toc-number">1.2.3.4.</span> <span class="toc-text">错误处理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9F%A5%E7%9C%8B%E7%94%A8%E6%88%B7%E6%98%AF%E5%90%A6%E5%B7%B2%E7%BB%8F%E6%B3%A8%E5%86%8C"><span class="toc-number">1.2.3.5.</span> <span class="toc-text">查看用户是否已经注册</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AF%86%E7%A0%81%E5%8A%A0%E5%AF%86"><span class="toc-number">1.2.3.6.</span> <span class="toc-text">密码加密</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%A8%E6%88%B7%E7%99%BB%E5%BD%95%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.3.</span> <span class="toc-text">用户登录接口</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E9%80%BB%E8%BE%91%E7%BB%93%E6%9E%84%E6%90%AD%E5%BB%BA"><span class="toc-number">1.3.1.</span> <span class="toc-text">登录逻辑结构搭建</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E6%9D%A1%E4%BB%B6"><span class="toc-number">1.3.2.</span> <span class="toc-text">登录条件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%80%E5%8C%96%E8%B7%AF%E7%94%B1%E6%B3%A8%E5%86%8C"><span class="toc-number">1.3.3.</span> <span class="toc-text">简化路由注册</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81"><span class="toc-number">1.3.4.</span> <span class="toc-text">登录凭证</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81%E5%91%A2%EF%BC%9F"><span class="toc-number">1.3.4.1.</span> <span class="toc-text">为什么需要登录凭证呢？</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JWT%E9%A2%81%E5%8F%91%E7%AD%BE%E5%90%8D"><span class="toc-number">1.3.5.</span> <span class="toc-text">JWT颁发签名</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%A8%E6%80%81%E4%BF%A1%E6%81%AF%E6%8E%A5%E5%8F%A3-%E4%B8%80%E5%AF%B9%E5%A4%9A"><span class="toc-number">1.4.</span> <span class="toc-text">动态信息接口(一对多)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A1%A8"><span class="toc-number">1.4.1.</span> <span class="toc-text">数据库表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%91%E8%A1%A8%E5%8A%A8%E6%80%81"><span class="toc-number">1.4.2.</span> <span class="toc-text">发表动态</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%A8%E6%80%81%E5%88%97%E8%A1%A8"><span class="toc-number">1.4.3.</span> <span class="toc-text">查询动态列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%A8%E6%80%81%E8%AF%A6%E6%83%85"><span class="toc-number">1.4.4.</span> <span class="toc-text">查询动态详情</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9%E5%8A%A8%E6%80%81"><span class="toc-number">1.4.5.</span> <span class="toc-text">修改动态</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%A0%E9%99%A4%E5%8A%A8%E6%80%81"><span class="toc-number">1.4.6.</span> <span class="toc-text">删除动态</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%84%E8%AE%BA%E5%8A%A8%E6%80%81%E6%8E%A5%E5%8F%A3-%E4%B8%80%E5%AF%B9%E5%A4%9A"><span class="toc-number">1.5.</span> <span class="toc-text">评论动态接口(一对多)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A1%A8-1"><span class="toc-number">1.5.1.</span> <span class="toc-text">数据库表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%91%E8%A1%A8%E8%AF%84%E8%AE%BA"><span class="toc-number">1.5.2.</span> <span class="toc-text">发表评论</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9E%E5%A4%8D%E8%AF%84%E8%AE%BA"><span class="toc-number">1.5.3.</span> <span class="toc-text">回复评论</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%A8%E6%80%81%E4%BF%A1%E6%81%AF%E4%B8%8E%E8%AF%84%E8%AE%BA%E6%8E%A5%E5%8F%A3-%E4%B8%80%E5%AF%B9%E5%A4%9A"><span class="toc-number">1.6.</span> <span class="toc-text">动态信息与评论接口(一对多)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%A8%E6%80%81%E5%88%97%E8%A1%A8-1"><span class="toc-number">1.6.1.</span> <span class="toc-text">查询动态列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%A8%E6%80%81%E8%AF%A6%E6%83%85-1"><span class="toc-number">1.6.2.</span> <span class="toc-text">查询动态详情</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E5%8A%A8%E6%80%81%E6%8E%A5%E5%8F%A3-%E5%A4%9A%E5%AF%B9%E5%A4%9A"><span class="toc-number">1.7.</span> <span class="toc-text">标签动态接口(多对多)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A1%A8-2"><span class="toc-number">1.7.1.</span> <span class="toc-text">数据库表</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E5%A4%84%E7%90%86%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.8.</span> <span class="toc-text">文件处理接口</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8A%E4%BC%A0%E5%A4%B4%E5%83%8F"><span class="toc-number">1.8.1.</span> <span class="toc-text">上传头像</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E9%80%BB%E8%BE%91"><span class="toc-number">1.8.1.1.</span> <span class="toc-text">基本逻辑</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A1%A8-3"><span class="toc-number">1.8.1.2.</span> <span class="toc-text">数据库表</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E6%95%B0%E6%8D%AE-1"><span class="toc-number">1.8.1.3.</span> <span class="toc-text">插入数据</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%A4%B4%E5%83%8F"><span class="toc-number">1.8.2.</span> <span class="toc-text">浏览头像</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9user%E8%A1%A8"><span class="toc-number">1.8.2.1.</span> <span class="toc-text">修改user表</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8A%E4%BC%A0%E5%A4%B4%E5%83%8F2"><span class="toc-number">1.8.3.</span> <span class="toc-text">上传头像2</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/5157567c.html">https://fsllala.top/articles/5157567c.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs-Koa2/">NodeJs Koa2</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_45.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/65b69107.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Nginx</div></div></a></div><div class="next-post pull-right"><a href="/articles/fa0f2f9c.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">网络安全修改</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/799084bf.html" title="NodeJs Koa2"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_9.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-12-29</div><div class="title">NodeJs Koa2</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#koa2%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98"><span class="toc-number">1.</span> <span class="toc-text">koa2项目实战</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B9%E7%9B%AE%E7%9A%84%E6%90%AD%E5%BB%BA"><span class="toc-number">1.1.</span> <span class="toc-text">项目的搭建</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%E7%9A%84%E5%88%92%E5%88%86"><span class="toc-number">1.1.1.</span> <span class="toc-text">目录结构的划分</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96"><span class="toc-number">1.1.1.1.</span> <span class="toc-text">安装依赖</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%BF%AB%E6%8D%B7%E5%90%AF%E5%8A%A8"><span class="toc-number">1.1.1.2.</span> <span class="toc-text">设置快捷启动</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6"><span class="toc-number">1.1.1.3.</span> <span class="toc-text">入口文件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%E6%8B%86%E5%88%86"><span class="toc-number">1.1.1.4.</span> <span class="toc-text">入口文件拆分</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">1.1.1.5.</span> <span class="toc-text">配置文件</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.2.</span> <span class="toc-text">用户注册接口</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9E%B6%E6%9E%84%E5%9F%BA%E7%A1%80%E5%86%99%E6%B3%95"><span class="toc-number">1.2.1.</span> <span class="toc-text">架构基础写法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9E%B6%E6%9E%84%E8%BF%9B%E9%98%B6%E5%86%99%E6%B3%95"><span class="toc-number">1.2.2.</span> <span class="toc-text">架构进阶写法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E6%8B%86%E5%88%86"><span class="toc-number">1.2.2.1.</span> <span class="toc-text">路由拆分</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E4%B8%AD%E9%97%B4%E4%BB%B6%E6%8B%86%E5%88%86"><span class="toc-number">1.2.2.2.</span> <span class="toc-text">路由中间件拆分</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E4%B8%AD%E9%97%B4%E4%BB%B6%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E5%BA%93%E6%8B%86%E5%88%86"><span class="toc-number">1.2.2.3.</span> <span class="toc-text">路由中间件操作数据库拆分</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%9E%E6%8E%A5%E6%95%B0%E6%8D%AE%E5%BA%93"><span class="toc-number">1.2.3.</span> <span class="toc-text">连接数据库</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96-1"><span class="toc-number">1.2.3.1.</span> <span class="toc-text">安装依赖</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E8%BF%9E%E6%8E%A5"><span class="toc-number">1.2.3.2.</span> <span class="toc-text">创建连接</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E6%95%B0%E6%8D%AE"><span class="toc-number">1.2.3.3.</span> <span class="toc-text">插入数据</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86"><span class="toc-number">1.2.3.4.</span> <span class="toc-text">错误处理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9F%A5%E7%9C%8B%E7%94%A8%E6%88%B7%E6%98%AF%E5%90%A6%E5%B7%B2%E7%BB%8F%E6%B3%A8%E5%86%8C"><span class="toc-number">1.2.3.5.</span> <span class="toc-text">查看用户是否已经注册</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AF%86%E7%A0%81%E5%8A%A0%E5%AF%86"><span class="toc-number">1.2.3.6.</span> <span class="toc-text">密码加密</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%A8%E6%88%B7%E7%99%BB%E5%BD%95%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.3.</span> <span class="toc-text">用户登录接口</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E9%80%BB%E8%BE%91%E7%BB%93%E6%9E%84%E6%90%AD%E5%BB%BA"><span class="toc-number">1.3.1.</span> <span class="toc-text">登录逻辑结构搭建</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E6%9D%A1%E4%BB%B6"><span class="toc-number">1.3.2.</span> <span class="toc-text">登录条件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%80%E5%8C%96%E8%B7%AF%E7%94%B1%E6%B3%A8%E5%86%8C"><span class="toc-number">1.3.3.</span> <span class="toc-text">简化路由注册</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81"><span class="toc-number">1.3.4.</span> <span class="toc-text">登录凭证</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81%E5%91%A2%EF%BC%9F"><span class="toc-number">1.3.4.1.</span> <span class="toc-text">为什么需要登录凭证呢？</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JWT%E9%A2%81%E5%8F%91%E7%AD%BE%E5%90%8D"><span class="toc-number">1.3.5.</span> <span class="toc-text">JWT颁发签名</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%A8%E6%80%81%E4%BF%A1%E6%81%AF%E6%8E%A5%E5%8F%A3-%E4%B8%80%E5%AF%B9%E5%A4%9A"><span class="toc-number">1.4.</span> <span class="toc-text">动态信息接口(一对多)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A1%A8"><span class="toc-number">1.4.1.</span> <span class="toc-text">数据库表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%91%E8%A1%A8%E5%8A%A8%E6%80%81"><span class="toc-number">1.4.2.</span> <span class="toc-text">发表动态</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%A8%E6%80%81%E5%88%97%E8%A1%A8"><span class="toc-number">1.4.3.</span> <span class="toc-text">查询动态列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%A8%E6%80%81%E8%AF%A6%E6%83%85"><span class="toc-number">1.4.4.</span> <span class="toc-text">查询动态详情</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9%E5%8A%A8%E6%80%81"><span class="toc-number">1.4.5.</span> <span class="toc-text">修改动态</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%A0%E9%99%A4%E5%8A%A8%E6%80%81"><span class="toc-number">1.4.6.</span> <span class="toc-text">删除动态</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%84%E8%AE%BA%E5%8A%A8%E6%80%81%E6%8E%A5%E5%8F%A3-%E4%B8%80%E5%AF%B9%E5%A4%9A"><span class="toc-number">1.5.</span> <span class="toc-text">评论动态接口(一对多)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A1%A8-1"><span class="toc-number">1.5.1.</span> <span class="toc-text">数据库表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%91%E8%A1%A8%E8%AF%84%E8%AE%BA"><span class="toc-number">1.5.2.</span> <span class="toc-text">发表评论</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9E%E5%A4%8D%E8%AF%84%E8%AE%BA"><span class="toc-number">1.5.3.</span> <span class="toc-text">回复评论</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%A8%E6%80%81%E4%BF%A1%E6%81%AF%E4%B8%8E%E8%AF%84%E8%AE%BA%E6%8E%A5%E5%8F%A3-%E4%B8%80%E5%AF%B9%E5%A4%9A"><span class="toc-number">1.6.</span> <span class="toc-text">动态信息与评论接口(一对多)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%A8%E6%80%81%E5%88%97%E8%A1%A8-1"><span class="toc-number">1.6.1.</span> <span class="toc-text">查询动态列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%A8%E6%80%81%E8%AF%A6%E6%83%85-1"><span class="toc-number">1.6.2.</span> <span class="toc-text">查询动态详情</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E5%8A%A8%E6%80%81%E6%8E%A5%E5%8F%A3-%E5%A4%9A%E5%AF%B9%E5%A4%9A"><span class="toc-number">1.7.</span> <span class="toc-text">标签动态接口(多对多)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A1%A8-2"><span class="toc-number">1.7.1.</span> <span class="toc-text">数据库表</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E5%A4%84%E7%90%86%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.8.</span> <span class="toc-text">文件处理接口</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8A%E4%BC%A0%E5%A4%B4%E5%83%8F"><span class="toc-number">1.8.1.</span> <span class="toc-text">上传头像</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E9%80%BB%E8%BE%91"><span class="toc-number">1.8.1.1.</span> <span class="toc-text">基本逻辑</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A1%A8-3"><span class="toc-number">1.8.1.2.</span> <span class="toc-text">数据库表</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E6%95%B0%E6%8D%AE-1"><span class="toc-number">1.8.1.3.</span> <span class="toc-text">插入数据</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%A4%B4%E5%83%8F"><span class="toc-number">1.8.2.</span> <span class="toc-text">浏览头像</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9user%E8%A1%A8"><span class="toc-number">1.8.2.1.</span> <span class="toc-text">修改user表</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8A%E4%BC%A0%E5%A4%B4%E5%83%8F2"><span class="toc-number">1.8.3.</span> <span class="toc-text">上传头像2</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/58add7e9.html b/articles/58add7e9.html
index fa13f3b1..6353d9c8 100644
--- a/articles/58add7e9.html
+++ b/articles/58add7e9.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:38:53'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_29.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">跨域</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:38:53.754Z" title="更新于 2024-02-26 19:38:53">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E8%B7%A8%E5%9F%9F/">跨域</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>4分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="跨域"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="什么是跨域"><a href="#什么是跨域" class="headerlink" title="什么是跨域"></a>什么是跨域</h2><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_29.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">跨域</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.877Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E8%B7%A8%E5%9F%9F/">跨域</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>4分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="跨域"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="什么是跨域"><a href="#什么是跨域" class="headerlink" title="什么是跨域"></a>什么是跨域</h2><ul>
 <li><p>由于浏览器的同源策略限制，当一个请求<code>url</code>的<strong>协议、域名、端口</strong>三者之间任意一个与当前页面<code>url</code>不同时，需要跨域才能成功访问；</p>
 </li>
 <li><p>同源策略是<strong>浏览器的行为</strong>，是浏览器最核心也最基本的<strong>安全功能</strong>；</p>
@@ -146,7 +146,7 @@ <h3 id="误区：前端通过jsonp解决跨域"><a href="#误区：前端通过j
 
 <h4 id="ajax请求"><a href="#ajax请求" class="headerlink" title="ajax请求"></a>ajax请求</h4><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">$.<span class="title function_">ajax</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>:<span class="string">&quot;http://suggestion.baidu.com/su?&quot;</span>,</span><br><span class="line">    <span class="attr">type</span>:<span class="string">&quot;get&quot;</span>,</span><br><span class="line">    <span class="attr">dataType</span>:<span class="string">&quot;jsonp&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>:&#123;</span><br><span class="line">        <span class="attr">wd</span>:<span class="string">&quot;123&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">jsonp</span>:<span class="string">&quot;cb&quot;</span>,<span class="comment">// 回调参数key</span></span><br><span class="line">    <span class="attr">jsonpCallback</span>:<span class="string">&quot;test&quot;</span>,<span class="comment">// 回调函数value</span></span><br><span class="line">    <span class="attr">success</span>:<span class="keyword">function</span>(<span class="params">res</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">error</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;error&quot;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846360917ky.png" alt="jsonp"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656846360917ky.png" alt="jsonp"></p>
 <h4 id="jsonp实现原理"><a href="#jsonp实现原理" class="headerlink" title="jsonp实现原理"></a>jsonp实现原理</h4><ul>
 <li><p>动态生成script标签，通过src属性来加载；</p>
 </li>
@@ -185,69 +185,69 @@ <h4 id="nginx-反向代理"><a href="#nginx-反向代理" class="headerlink" tit
 </ol>
 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">http://nginx.org/en/download.html</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846395917nginx.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656846395917nginx.png" alt="nginx"></p>
 <ol start="2">
 <li>在根目录下，输入<code>cmd</code>打开终端</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846458918nginx2.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656846458918nginx2.png" alt="nginx"></p>
 <ol start="3">
 <li>在终端中使用指令<code>start nginx</code>开启nginx</li>
 <li>在浏览器输入<code>localhost</code>，出现如下界面即代表开启成功</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846752917nginx3.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656846752917nginx3.png" alt="nginx"></p>
 <ol start="5">
 <li>配置nginx ：nginx.conf里面配置</li>
 </ol>
 <blockquote>
 <p>后端的 ip +后端口 之后 最后必须有 <code>/</code>，而且最后的最后必须要带上<code>;</code></p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846838916nginx4.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656846838916nginx4.png" alt="nginx"></p>
 <blockquote>
 <p>如果不带<code>;</code> nginx命令会不生效；</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846922917nginx5.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656846922917nginx5.png" alt="nginx"></p>
 <blockquote>
 <p>如果不带 <code>/ </code>；接口地址为404；</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846964974nginx6.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656846964974nginx6.png" alt="nginx"></p>
 <ol start="6">
 <li>修改前端的请求接口</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847108917nginx7.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847108917nginx7.png" alt="nginx"></p>
 <ol start="7">
 <li>将前端文件放到<code>nginx文件的html目录下</code>(也可以不放，见下文的补充)</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847187916nginx8.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847187916nginx8.png" alt="nginx"></p>
 <ol start="8">
 <li>重新加载一下<code>nginx -s reload</code>，然后在浏览器输入 <code>localhost/myDemo.html</code></li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847224916nginx9.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847224916nginx9.png" alt="nginx"></p>
 <blockquote>
 <p>未经过反向代理的接口为：</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847268916nginx10.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847268916nginx10.png" alt="nginx"></p>
 <h4 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h4><blockquote>
 <p>上面第7步中，也可以不将前端文件放到<code>nginx文件的html目录下</code></p>
 </blockquote>
 <ol>
 <li>项目通过<code>vsCode</code>插件<code>Live Server</code>起一个本地服务，地址是<code>127.0.0.1:5500</code>，<strong>然后这个服务就不能关掉了</strong>，当然页面可以关；</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847329917nginx11.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847329917nginx11.png" alt="nginx"></p>
 <ol start="2">
 <li>修改<code>nginx</code>的配置文件</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847383916nginx12.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847383916nginx12.png" alt="nginx"></p>
 <ol start="3">
 <li>重新加载一下<code>nginx -s reload</code>，然后在浏览器输入 <code>localhost/myDemo.html</code></li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847420916nginx13.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847420916nginx13.png" alt="nginx"></p>
 <h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a target="_blank" rel="noopener" href="https://juejin.cn/post/7024799741120610318">关于Jsonp跨域，你知道多少？</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_40967353/article/details/107935984?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2.pc_relevant_default&utm_relevant_index=5">jsonp解决跨域问题（简单易懂）</a></p>
 <p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/zjdyl/p/15620929.html">jsonp劫持</a></p>
 <p><a target="_blank" rel="noopener" href="https://juejin.cn/post/7021433082691452936">前端解决跨域，nginx 反向代理</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/envon123/article/details/83270277">正确的Nginx跨域配置</a></p>
 <p><a target="_blank" rel="noopener" href="https://juejin.cn/post/7027378324611530759">前端本地开发如何靠自己解决跨域</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/58add7e9.html">https://fsllala.top/articles/58add7e9.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E8%B7%A8%E5%9F%9F/">跨域</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_29.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/5ca213d8.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_25.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3 Suspense</div></div></a></div><div class="next-post pull-right"><a href="/articles/6e473482.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_37.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">栈内存和堆内存</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E8%B7%A8%E5%9F%9F"><span class="toc-number">1.</span> <span class="toc-text">什么是跨域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E6%96%B9%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">前端解决跨域方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AF%E5%8C%BA%EF%BC%9A%E5%89%8D%E7%AB%AF%E9%80%9A%E8%BF%87jsonp%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F"><span class="toc-number">2.1.</span> <span class="toc-text">误区：前端通过jsonp解决跨域</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8E%9F%E7%94%9F%E5%86%99%E6%B3%95"><span class="toc-number">2.1.1.</span> <span class="toc-text">原生写法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#ajax%E8%AF%B7%E6%B1%82"><span class="toc-number">2.1.2.</span> <span class="toc-text">ajax请求</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#jsonp%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86"><span class="toc-number">2.1.3.</span> <span class="toc-text">jsonp实现原理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BB%93%E8%AE%BA"><span class="toc-number">2.1.4.</span> <span class="toc-text">结论</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E9%80%9A%E8%BF%87%E4%BB%A3%E7%90%86%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F"><span class="toc-number">2.2.</span> <span class="toc-text">前端通过代理解决跨域</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#nginx-%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86"><span class="toc-number">2.2.1.</span> <span class="toc-text">nginx 反向代理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A1%A5%E5%85%85"><span class="toc-number">2.2.2.</span> <span class="toc-text">补充</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">3.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/58add7e9.html">https://fsllala.top/articles/58add7e9.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E8%B7%A8%E5%9F%9F/">跨域</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_29.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/5ca213d8.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_25.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3 Suspense</div></div></a></div><div class="next-post pull-right"><a href="/articles/6e473482.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_37.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">栈内存和堆内存</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E8%B7%A8%E5%9F%9F"><span class="toc-number">1.</span> <span class="toc-text">什么是跨域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E6%96%B9%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">前端解决跨域方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AF%E5%8C%BA%EF%BC%9A%E5%89%8D%E7%AB%AF%E9%80%9A%E8%BF%87jsonp%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F"><span class="toc-number">2.1.</span> <span class="toc-text">误区：前端通过jsonp解决跨域</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8E%9F%E7%94%9F%E5%86%99%E6%B3%95"><span class="toc-number">2.1.1.</span> <span class="toc-text">原生写法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#ajax%E8%AF%B7%E6%B1%82"><span class="toc-number">2.1.2.</span> <span class="toc-text">ajax请求</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#jsonp%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86"><span class="toc-number">2.1.3.</span> <span class="toc-text">jsonp实现原理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BB%93%E8%AE%BA"><span class="toc-number">2.1.4.</span> <span class="toc-text">结论</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E9%80%9A%E8%BF%87%E4%BB%A3%E7%90%86%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F"><span class="toc-number">2.2.</span> <span class="toc-text">前端通过代理解决跨域</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#nginx-%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86"><span class="toc-number">2.2.1.</span> <span class="toc-text">nginx 反向代理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A1%A5%E5%85%85"><span class="toc-number">2.2.2.</span> <span class="toc-text">补充</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">3.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/59b49683.html b/articles/59b49683.html
index a063df52..7f4a049c 100644
--- a/articles/59b49683.html
+++ b/articles/59b49683.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:32:07'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_1.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Dom</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:32:07.467Z" title="更新于 2024-02-26 19:32:07">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/Dom/">Dom</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>9分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Dom"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Dom"><a href="#Dom" class="headerlink" title="Dom"></a>Dom</h1><p>文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口(API)。 (DOM就是用来处理HTML机构)。</p>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_1.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Dom</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.898Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/Dom/">Dom</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>9分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Dom"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Dom"><a href="#Dom" class="headerlink" title="Dom"></a>Dom</h1><p>文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口(API)。 (DOM就是用来处理HTML机构)。</p>
 <h2 id="节点"><a href="#节点" class="headerlink" title="节点"></a>节点</h2><p>加载HTML页面时，web浏览器生成一个树型结构，用来表示页面内部结构，称之为DOM树，DOM将这种树型结构理解为由节点组成。</p>
 <h3 id="节点属性"><a href="#节点属性" class="headerlink" title="节点属性"></a>节点属性</h3><table>
 <thead>
@@ -172,7 +172,7 @@ <h3 id="获取子节点"><a href="#获取子节点" class="headerlink" title="
 </ul>
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">&quot;ul1&quot;</span>&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">&lt;/ul&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> oUl = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;ul1&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> olis = oUl.<span class="property">children</span>;</span><br><span class="line"><span class="keyword">var</span> olis2 = oUl.<span class="property">childNodes</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(olis);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(olis2);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656841602904dom.png" alt="输出"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656841602904dom.png" alt="输出"></p>
 <p>可以通过节点属性获取到想要的节点，比如P节点：</p>
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">        &lt;ul id=<span class="string">&quot;ul1&quot;</span>&gt;</span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> oUl = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;ul1&#x27;</span>);</span><br><span class="line">    <span class="keyword">var</span> olis = <span class="title class_">Array</span>.<span class="title function_">from</span>(oUl.<span class="property">children</span>);</span><br><span class="line">    <span class="keyword">var</span> oP=<span class="string">&quot;&quot;</span>;</span><br><span class="line">    olis.<span class="title function_">forEach</span>(<span class="function"><span class="params">ele</span>=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(ele.<span class="property">nodeName</span>==<span class="string">&quot;P&quot;</span>)&#123;</span><br><span class="line">            oP=ele;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(oP); <span class="comment">//&lt;p&gt;&lt;/p&gt;</span></span><br></pre></td></tr></table></figure>
 
@@ -343,7 +343,7 @@ <h2 id="getComputedStyle"><a href="#getComputedStyle" class="headerlink" title="
 
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line">myDiv.<span class="property">onclick</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">style</span>.<span class="property">color</span>);  <span class="comment">//  空</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">style</span>.<span class="property">fontWeight</span>); <span class="comment">// 900</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">getComputedStyle</span>(myDiv).<span class="property">fontSize</span>);<span class="comment">// 24px</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/59b49683.html">https://fsllala.top/articles/59b49683.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Dom/">Dom</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_1.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/31c1f94e.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">预解析</div></div></a></div><div class="next-post pull-right"><a href="/articles/16b55383.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_4.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Dom尺寸与位置</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Dom"><span class="toc-number">1.</span> <span class="toc-text">Dom</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8A%82%E7%82%B9"><span class="toc-number">1.1.</span> <span class="toc-text">节点</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E5%B1%9E%E6%80%A7"><span class="toc-number">1.1.1.</span> <span class="toc-text">节点属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%AD%90%E8%8A%82%E7%82%B9"><span class="toc-number">1.1.2.</span> <span class="toc-text">获取子节点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E7%88%B6%E8%8A%82%E7%82%B9"><span class="toc-number">1.1.3.</span> <span class="toc-text">获取父节点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E7%9A%84%E5%85%B6%E4%BB%96%E8%8E%B7%E5%8F%96%E6%96%B9%E5%BC%8F"><span class="toc-number">1.1.4.</span> <span class="toc-text">节点的其他获取方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E7%9A%84%E6%93%8D%E4%BD%9C"><span class="toc-number">1.1.5.</span> <span class="toc-text">节点的操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A7%E7%9A%84%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95"><span class="toc-number">1.1.6.</span> <span class="toc-text">旧的节点操作方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E5%85%83%E7%B4%A0%E7%BB%93%E6%9E%84%E4%B8%8A%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.</span> <span class="toc-text">操作元素结构上的属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#attribute"><span class="toc-number">1.2.1.</span> <span class="toc-text">attribute</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#property"><span class="toc-number">1.2.2.</span> <span class="toc-text">property</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#data-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.3.</span> <span class="toc-text">data-*自定义属性</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript%E5%8A%A8%E6%80%81%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.3.</span> <span class="toc-text">JavaScript动态修改样式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%B8%E8%A7%84%E5%86%99%E6%B3%95"><span class="toc-number">1.3.1.</span> <span class="toc-text">常规写法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#className"><span class="toc-number">1.3.2.</span> <span class="toc-text">className</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#classList"><span class="toc-number">1.3.3.</span> <span class="toc-text">classList</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#getComputedStyle"><span class="toc-number">1.4.</span> <span class="toc-text">getComputedStyle</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/59b49683.html">https://fsllala.top/articles/59b49683.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Dom/">Dom</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_1.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/31c1f94e.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">预解析</div></div></a></div><div class="next-post pull-right"><a href="/articles/16b55383.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_4.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Dom尺寸与位置</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Dom"><span class="toc-number">1.</span> <span class="toc-text">Dom</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8A%82%E7%82%B9"><span class="toc-number">1.1.</span> <span class="toc-text">节点</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E5%B1%9E%E6%80%A7"><span class="toc-number">1.1.1.</span> <span class="toc-text">节点属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%AD%90%E8%8A%82%E7%82%B9"><span class="toc-number">1.1.2.</span> <span class="toc-text">获取子节点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E7%88%B6%E8%8A%82%E7%82%B9"><span class="toc-number">1.1.3.</span> <span class="toc-text">获取父节点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E7%9A%84%E5%85%B6%E4%BB%96%E8%8E%B7%E5%8F%96%E6%96%B9%E5%BC%8F"><span class="toc-number">1.1.4.</span> <span class="toc-text">节点的其他获取方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E7%9A%84%E6%93%8D%E4%BD%9C"><span class="toc-number">1.1.5.</span> <span class="toc-text">节点的操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A7%E7%9A%84%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95"><span class="toc-number">1.1.6.</span> <span class="toc-text">旧的节点操作方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E5%85%83%E7%B4%A0%E7%BB%93%E6%9E%84%E4%B8%8A%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.</span> <span class="toc-text">操作元素结构上的属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#attribute"><span class="toc-number">1.2.1.</span> <span class="toc-text">attribute</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#property"><span class="toc-number">1.2.2.</span> <span class="toc-text">property</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#data-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.3.</span> <span class="toc-text">data-*自定义属性</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript%E5%8A%A8%E6%80%81%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.3.</span> <span class="toc-text">JavaScript动态修改样式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%B8%E8%A7%84%E5%86%99%E6%B3%95"><span class="toc-number">1.3.1.</span> <span class="toc-text">常规写法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#className"><span class="toc-number">1.3.2.</span> <span class="toc-text">className</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#classList"><span class="toc-number">1.3.3.</span> <span class="toc-text">classList</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#getComputedStyle"><span class="toc-number">1.4.</span> <span class="toc-text">getComputedStyle</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/5ca213d8.html b/articles/5ca213d8.html
index f260d994..de6e0ad6 100644
--- a/articles/5ca213d8.html
+++ b/articles/5ca213d8.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:37:03'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_25.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 Suspense</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:37:03.599Z" title="更新于 2024-02-26 19:37:03">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3-Suspense/">Vue3 Suspense</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">674</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>2分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 Suspense"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="Suspense"><a href="#Suspense" class="headerlink" title="Suspense"></a>Suspense</h2><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_25.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 Suspense</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3-Suspense/">Vue3 Suspense</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">674</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>2分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 Suspense"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="Suspense"><a href="#Suspense" class="headerlink" title="Suspense"></a>Suspense</h2><ul>
 <li>等待异步组件时渲染一些额外内容，让应用有更好的用户体验(内置组件，不需要引入)</li>
 <li>其实和2.x中的路由懒加载差不多</li>
 </ul>
@@ -161,8 +161,8 @@
 <blockquote>
 <p>效果如下图所示</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846104915suspense.gif" alt="Suspense"></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/5ca213d8.html">https://fsllala.top/articles/5ca213d8.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3-Suspense/">Vue3 Suspense</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_25.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/6d48bcfd.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_22.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3 provide与inject</div></div></a></div><div class="next-post pull-right"><a href="/articles/58add7e9.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_29.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">跨域</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Suspense"><span class="toc-number">1.</span> <span class="toc-text">Suspense</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656846104915suspense.gif" alt="Suspense"></p>
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/5ca213d8.html">https://fsllala.top/articles/5ca213d8.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3-Suspense/">Vue3 Suspense</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_25.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/6d48bcfd.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_22.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3 provide与inject</div></div></a></div><div class="next-post pull-right"><a href="/articles/58add7e9.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_29.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">跨域</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Suspense"><span class="toc-number">1.</span> <span class="toc-text">Suspense</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/5fc41a6b.html b/articles/5fc41a6b.html
index ac0514ba..8edda460 100644
--- a/articles/5fc41a6b.html
+++ b/articles/5fc41a6b.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:31:46'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_44.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs 登录凭证</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:31:46.846Z" title="更新于 2024-02-26 19:31:46">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81/">登录凭证</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs 登录凭证"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="登录凭证"><a href="#登录凭证" class="headerlink" title="登录凭证"></a>登录凭证</h1><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_44.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs 登录凭证</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.878Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81/">登录凭证</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs 登录凭证"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="登录凭证"><a href="#登录凭证" class="headerlink" title="登录凭证"></a>登录凭证</h1><blockquote>
 <p>登录成功返回凭证：<code>cookie+session</code>或者是<code>Token令牌</code>；现在基本都是<code>Token令牌</code>作为登录凭证；</p>
 </blockquote>
 <h2 id="为什么需要登录凭证呢？"><a href="#为什么需要登录凭证呢？" class="headerlink" title="为什么需要登录凭证呢？"></a>为什么需要登录凭证呢？</h2><blockquote>
@@ -154,8 +154,8 @@ <h2 id="为什么需要登录凭证呢？"><a href="#为什么需要登录凭证
 </ul>
 </li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224477117cookie.png" alt="cookie"></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224528691cookie.png" alt="cookie"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1673224477117cookie.png" alt="cookie"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1673224528691cookie.png" alt="cookie"></p>
 <blockquote>
 <p>看到了吧？这就是http的无状态，也就是服务器不知道你上一步做了什么，我们必须得有一个办法可以证明我们登录过；</p>
 </blockquote>
@@ -165,7 +165,7 @@ <h2 id="为什么需要登录凭证呢？"><a href="#为什么需要登录凭证
 </ul>
 </li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224500212cookie.png" alt="cookie"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1673224500212cookie.png" alt="cookie"></p>
 <ul>
 <li>目前登录凭证有两种：<ul>
 <li><code>cookie+session</code>(逐渐淘汰)</li>
@@ -266,7 +266,7 @@ <h3 id="JWT实现Token机制"><a href="#JWT实现Token机制" class="headerlink"
 <p>即：header生成一个字符串，payload生成一个字符串，signature将前面两个结合在加密生成一个字符串，中间都用点连接：</p>
 <p>即：<code>token：header.payload.signature</code></p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/token1673523132958.png" alt="token"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/token1673523132958.png" alt="token"></p>
 <h3 id="Koa颁发与验证Token"><a href="#Koa颁发与验证Token" class="headerlink" title="Koa颁发与验证Token"></a>Koa颁发与验证Token</h3><ol>
 <li>安装Koa</li>
 </ol>
@@ -285,7 +285,7 @@ <h3 id="Koa颁发与验证Token"><a href="#Koa颁发与验证Token" class="heade
 <ol start="4">
 <li>使用<code>postman</code>验证</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/token21673524954972.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/token21673524954972.png"></p>
 <ol start="5">
 <li>获取<code>headers</code>中的<code>token</code>，通过<code>jwt.verify(token,key)</code>验证<code>token</code>是否正确&#x2F;过期；</li>
 </ol>
@@ -294,7 +294,7 @@ <h3 id="Koa颁发与验证Token"><a href="#Koa颁发与验证Token" class="heade
 <ol start="6">
 <li>使用<code>postman</code>验证</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/token61673526547688.png" alt="token"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/token61673526547688.png" alt="token"></p>
 <blockquote>
 <p>上面案例中，使用的是<code>SHA256</code>对称加密来颁发与验证签名；秘钥一旦泄露，就会很危险；即使不泄露，颁发和验证的秘钥是一样的，在我验证<code>token</code>的时候，我就可以颁发<code>token</code>，这样好多好多人都可以颁发<code>token</code>；</p>
 </blockquote>
@@ -331,13 +331,13 @@ <h4 id="生成私钥和公钥"><a href="#生成私钥和公钥" class="headerlin
 </ol>
 <figure class="highlight js"><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"><span class="comment">// 随便新建一个文件夹 git bash here</span></span><br><span class="line">openssl</span><br><span class="line">genrsa -out private.<span class="property">key</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/siyue1673528031903.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/siyue1673528031903.png"></p>
 <ol start="2">
 <li>根据私钥生成公钥</li>
 </ol>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">rsa -<span class="keyword">in</span> private.<span class="property">key</span> -pubout -out public.<span class="property">key</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/gongyue1673528315317.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/gongyue1673528315317.png"></p>
 <h4 id="Koa颁发与验证Token-1"><a href="#Koa颁发与验证Token-1" class="headerlink" title="Koa颁发与验证Token"></a>Koa颁发与验证Token</h4><ol>
 <li>读取上面生成的私钥与公钥，作为加密与解密的<code>key</code>；</li>
 <li>这里不是默认的<code>SHA256</code>，所以加密和解密的时候我们要指定我们的加密算法；<code>(RS256)</code>；</li>
@@ -347,11 +347,11 @@ <h4 id="Koa颁发与验证Token-1"><a href="#Koa颁发与验证Token-1" class="h
 <ol start="3">
 <li>使用<code>postman</code>验证</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/token71673529201209.png" alt="token"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/token71673529201209.png" alt="token"></p>
 <h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_44247866/article/details/125628585">关于cookie</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/swadian2008/article/details/104267034">Cookie和Session详解</a></p>
 <p><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/rwp9sXi4Y8Ht0UbA6z4hSg">前端鉴权必须了解的 5 个兄弟：cookie、session、token、jwt、单点登录</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/5fc41a6b.html">https://fsllala.top/articles/5fc41a6b.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs-%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81/">NodeJs 登录凭证</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_44.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/46635768.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs连接MySQL</div></div></a></div><div class="next-post pull-right"><a href="/articles/7067fd0d.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_16.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">TypeScript</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81"><span class="toc-number">1.</span> <span class="toc-text">登录凭证</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81%E5%91%A2%EF%BC%9F"><span class="toc-number">1.1.</span> <span class="toc-text">为什么需要登录凭证呢？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#cookie"><span class="toc-number">1.2.</span> <span class="toc-text">cookie</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE"><span class="toc-number">1.2.1.</span> <span class="toc-text">配置</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#session"><span class="toc-number">1.3.</span> <span class="toc-text">session</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#cookie%E5%92%8Csession%E7%BC%BA%E7%82%B9"><span class="toc-number">1.4.</span> <span class="toc-text">cookie和session缺点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Token"><span class="toc-number">1.5.</span> <span class="toc-text">Token</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Token%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">1.5.1.</span> <span class="toc-text">Token是什么?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JWT%E5%AE%9E%E7%8E%B0Token%E6%9C%BA%E5%88%B6"><span class="toc-number">1.5.2.</span> <span class="toc-text">JWT实现Token机制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Koa%E9%A2%81%E5%8F%91%E4%B8%8E%E9%AA%8C%E8%AF%81Token"><span class="toc-number">1.5.3.</span> <span class="toc-text">Koa颁发与验证Token</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%9D%9E%E5%AF%B9%E7%A7%B0%E5%8A%A0%E5%AF%86"><span class="toc-number">1.5.4.</span> <span class="toc-text">非对称加密</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E7%A7%81%E9%92%A5%E5%92%8C%E5%85%AC%E9%92%A5"><span class="toc-number">1.5.4.1.</span> <span class="toc-text">生成私钥和公钥</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Koa%E9%A2%81%E5%8F%91%E4%B8%8E%E9%AA%8C%E8%AF%81Token-1"><span class="toc-number">1.5.4.2.</span> <span class="toc-text">Koa颁发与验证Token</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">1.6.</span> <span class="toc-text">参考文献</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/5fc41a6b.html">https://fsllala.top/articles/5fc41a6b.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs-%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81/">NodeJs 登录凭证</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_44.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/46635768.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs连接MySQL</div></div></a></div><div class="next-post pull-right"><a href="/articles/7067fd0d.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_16.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">TypeScript</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81"><span class="toc-number">1.</span> <span class="toc-text">登录凭证</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81%E5%91%A2%EF%BC%9F"><span class="toc-number">1.1.</span> <span class="toc-text">为什么需要登录凭证呢？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#cookie"><span class="toc-number">1.2.</span> <span class="toc-text">cookie</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE"><span class="toc-number">1.2.1.</span> <span class="toc-text">配置</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#session"><span class="toc-number">1.3.</span> <span class="toc-text">session</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#cookie%E5%92%8Csession%E7%BC%BA%E7%82%B9"><span class="toc-number">1.4.</span> <span class="toc-text">cookie和session缺点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Token"><span class="toc-number">1.5.</span> <span class="toc-text">Token</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Token%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">1.5.1.</span> <span class="toc-text">Token是什么?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JWT%E5%AE%9E%E7%8E%B0Token%E6%9C%BA%E5%88%B6"><span class="toc-number">1.5.2.</span> <span class="toc-text">JWT实现Token机制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Koa%E9%A2%81%E5%8F%91%E4%B8%8E%E9%AA%8C%E8%AF%81Token"><span class="toc-number">1.5.3.</span> <span class="toc-text">Koa颁发与验证Token</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%9D%9E%E5%AF%B9%E7%A7%B0%E5%8A%A0%E5%AF%86"><span class="toc-number">1.5.4.</span> <span class="toc-text">非对称加密</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E7%A7%81%E9%92%A5%E5%92%8C%E5%85%AC%E9%92%A5"><span class="toc-number">1.5.4.1.</span> <span class="toc-text">生成私钥和公钥</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Koa%E9%A2%81%E5%8F%91%E4%B8%8E%E9%AA%8C%E8%AF%81Token-1"><span class="toc-number">1.5.4.2.</span> <span class="toc-text">Koa颁发与验证Token</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">1.6.</span> <span class="toc-text">参考文献</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/65b69107.html b/articles/65b69107.html
index ff80ff10..90f40d94 100644
--- a/articles/65b69107.html
+++ b/articles/65b69107.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:33:50'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Nginx</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:33:50.696Z" title="更新于 2024-02-26 19:33:50">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Nginx/">Nginx</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>10分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Nginx"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="正向代理与反向代理"><a href="#正向代理与反向代理" class="headerlink" title="正向代理与反向代理"></a>正向代理与反向代理</h2><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_43.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Nginx</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.896Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Nginx/">Nginx</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>10分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Nginx"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="正向代理与反向代理"><a href="#正向代理与反向代理" class="headerlink" title="正向代理与反向代理"></a>正向代理与反向代理</h2><ul>
 <li><p>反向代理：服务端将请求转发给其他应用程序，比如转给Java；</p>
 </li>
 <li><p>正向代理：客户端使用，比如vpn；</p>
@@ -162,11 +162,11 @@ <h2 id="环境"><a href="#环境" class="headerlink" title="环境"></a>环境</
 <h2 id="反向代理"><a href="#反向代理" class="headerlink" title="反向代理"></a>反向代理</h2><h3 id="代理网站"><a href="#代理网站" class="headerlink" title="代理网站"></a>代理网站</h3><figure class="highlight nginx"><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"><span class="section">location</span> / &#123;</span><br><span class="line">    <span class="attribute">proxy_pass</span> http://www.atguigu.com/;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
 <p>在浏览器地址栏输入<code>192.168.209.111</code>，然后地址栏不变，但访问的是尚硅谷的网站；</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%8601692253825508.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%8601692253825508.png" alt="nginx"></p>
 <h3 id="代理网站，地址栏url发生改变"><a href="#代理网站，地址栏url发生改变" class="headerlink" title="代理网站，地址栏url发生改变"></a>代理网站，地址栏url发生改变</h3><figure class="highlight nginx"><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"><span class="section">location</span> / &#123;</span><br><span class="line">  <span class="attribute">proxy_pass</span>  http://www.csdn.net/;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
 <p>在浏览器地址栏输入<code>192.168.209.111</code>，地址栏会变成<code>https://www.csdn.net/</code>；相当于做了一个跳转的操作，跳转到了<code>https://www.csdn.net/</code>；</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%861692253641507.png" alt="nginx"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%861692253641507.png" alt="nginx"></p>
 <p>原因是：目标服务器做了重定向：目标服务器告诉nginx对http协议做301的https重定向，然后nginx再告诉浏览器，最后浏览器根据Location中的地址，重新加载界面；</p>
 <h3 id="代理网站，代理的为https"><a href="#代理网站，代理的为https" class="headerlink" title="代理网站，代理的为https"></a>代理网站，代理的为https</h3><figure class="highlight nginx"><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"><span class="section">location</span> / &#123;</span><br><span class="line">  <span class="attribute">proxy_pass</span>  https://www.csdn.net/;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
@@ -290,7 +290,7 @@ <h2 id="高可用场景"><a href="#高可用场景" class="headerlink" title="
 <p>用户访问时，访问的是一个虚拟IP，keepalived会选定一个主服务器使用这个虚拟IP；</p>
 <p>每台机器上的keepalived会相互通信，根据其他机器上的keepalived进程是否存在，判断服务器状态，如果默认的Master停止了，就会在剩下的Backup机器中，竞选出一台Nginx服务器作为Master；</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/keepalived1692685358576.png" alt="keepalived"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/keepalived1692685358576.png" alt="keepalived"></p>
 <ol>
 <li>yum安装</li>
 </ol>
@@ -325,12 +325,12 @@ <h2 id="高可用场景"><a href="#高可用场景" class="headerlink" title="
 <ol start="5">
 <li>通过命令<code>ip addr</code>查看机器一的ip信息，可以看到虚拟IP；</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/keepalived21692686301581.png" alt="keepalived"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/keepalived21692686301581.png" alt="keepalived"></p>
 <p>6.本地打开dos，ping虚拟的ip <code>192.168.209.200</code>；</p>
 <blockquote>
 <p>现象：当主机断路的时候，丢包一次，然后自动连上备用机；</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/keepalived31692686661576.png" alt="keepalived"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/keepalived31692686661576.png" alt="keepalived"></p>
 <ol start="7">
 <li>浏览器URL访问虚拟的ip <code>192.168.209.200</code>；</li>
 </ol>
@@ -356,7 +356,7 @@ <h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考
 <li><p><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_57377057/article/details/126568841?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-4-126568841-blog-131473092.235%5Ev38%5Epc_relevant_sort_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-4-126568841-blog-131473092.235%5Ev38%5Epc_relevant_sort_base3&utm_relevant_index=7">Nginx性能优化(超详细)</a></p>
 </li>
 </ul>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/65b69107.html">https://fsllala.top/articles/65b69107.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Nginx/">Nginx</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/3ef665a6.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">https</div></div></a></div><div class="next-post pull-right"><a href="/articles/5157567c.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Koa2实战</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%AD%A3%E5%90%91%E4%BB%A3%E7%90%86%E4%B8%8E%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86"><span class="toc-number">1.</span> <span class="toc-text">正向代理与反向代理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%8E%AF%E5%A2%83"><span class="toc-number">2.</span> <span class="toc-text">环境</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86"><span class="toc-number">3.</span> <span class="toc-text">反向代理</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%90%86%E7%BD%91%E7%AB%99"><span class="toc-number">3.1.</span> <span class="toc-text">代理网站</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%90%86%E7%BD%91%E7%AB%99%EF%BC%8C%E5%9C%B0%E5%9D%80%E6%A0%8Furl%E5%8F%91%E7%94%9F%E6%94%B9%E5%8F%98"><span class="toc-number">3.2.</span> <span class="toc-text">代理网站，地址栏url发生改变</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%90%86%E7%BD%91%E7%AB%99%EF%BC%8C%E4%BB%A3%E7%90%86%E7%9A%84%E4%B8%BAhttps"><span class="toc-number">3.3.</span> <span class="toc-text">代理网站，代理的为https</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1"><span class="toc-number">4.</span> <span class="toc-text">负载均衡</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BD%AE%E8%AF%A2"><span class="toc-number">4.1.</span> <span class="toc-text">轮询</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9D%83%E9%87%8D"><span class="toc-number">4.2.</span> <span class="toc-text">权重</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%A8%E9%9D%99%E5%88%86%E7%A6%BB"><span class="toc-number">5.</span> <span class="toc-text">动静分离</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85node%E7%8E%AF%E5%A2%83"><span class="toc-number">5.1.</span> <span class="toc-text">安装node环境</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9C%A8win11%E6%9C%AC%E5%9C%B0%E8%BF%9B%E8%A1%8CNodeJs%E8%B5%B7%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1"><span class="toc-number">5.2.</span> <span class="toc-text">在win11本地进行NodeJs起本地服务</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#URLRewrite"><span class="toc-number">6.</span> <span class="toc-text">URLRewrite</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%98%B2%E7%9B%97%E9%93%BE"><span class="toc-number">7.</span> <span class="toc-text">防盗链</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%AB%98%E5%8F%AF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">8.</span> <span class="toc-text">高可用场景</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#keepalived"><span class="toc-number">8.1.</span> <span class="toc-text">keepalived</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gzip"><span class="toc-number">9.</span> <span class="toc-text">gzip</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE"><span class="toc-number">9.1.</span> <span class="toc-text">常用配置</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">10.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/65b69107.html">https://fsllala.top/articles/65b69107.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Nginx/">Nginx</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_43.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/3ef665a6.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">https</div></div></a></div><div class="next-post pull-right"><a href="/articles/5157567c.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Koa2实战</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%AD%A3%E5%90%91%E4%BB%A3%E7%90%86%E4%B8%8E%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86"><span class="toc-number">1.</span> <span class="toc-text">正向代理与反向代理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%8E%AF%E5%A2%83"><span class="toc-number">2.</span> <span class="toc-text">环境</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86"><span class="toc-number">3.</span> <span class="toc-text">反向代理</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%90%86%E7%BD%91%E7%AB%99"><span class="toc-number">3.1.</span> <span class="toc-text">代理网站</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%90%86%E7%BD%91%E7%AB%99%EF%BC%8C%E5%9C%B0%E5%9D%80%E6%A0%8Furl%E5%8F%91%E7%94%9F%E6%94%B9%E5%8F%98"><span class="toc-number">3.2.</span> <span class="toc-text">代理网站，地址栏url发生改变</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%90%86%E7%BD%91%E7%AB%99%EF%BC%8C%E4%BB%A3%E7%90%86%E7%9A%84%E4%B8%BAhttps"><span class="toc-number">3.3.</span> <span class="toc-text">代理网站，代理的为https</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1"><span class="toc-number">4.</span> <span class="toc-text">负载均衡</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BD%AE%E8%AF%A2"><span class="toc-number">4.1.</span> <span class="toc-text">轮询</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9D%83%E9%87%8D"><span class="toc-number">4.2.</span> <span class="toc-text">权重</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%A8%E9%9D%99%E5%88%86%E7%A6%BB"><span class="toc-number">5.</span> <span class="toc-text">动静分离</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85node%E7%8E%AF%E5%A2%83"><span class="toc-number">5.1.</span> <span class="toc-text">安装node环境</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9C%A8win11%E6%9C%AC%E5%9C%B0%E8%BF%9B%E8%A1%8CNodeJs%E8%B5%B7%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1"><span class="toc-number">5.2.</span> <span class="toc-text">在win11本地进行NodeJs起本地服务</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#URLRewrite"><span class="toc-number">6.</span> <span class="toc-text">URLRewrite</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%98%B2%E7%9B%97%E9%93%BE"><span class="toc-number">7.</span> <span class="toc-text">防盗链</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%AB%98%E5%8F%AF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">8.</span> <span class="toc-text">高可用场景</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#keepalived"><span class="toc-number">8.1.</span> <span class="toc-text">keepalived</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gzip"><span class="toc-number">9.</span> <span class="toc-text">gzip</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE"><span class="toc-number">9.1.</span> <span class="toc-text">常用配置</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">10.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/6d48bcfd.html b/articles/6d48bcfd.html
index d81eae38..fa0d58d4 100644
--- a/articles/6d48bcfd.html
+++ b/articles/6d48bcfd.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:36:36'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_22.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 provide与inject</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:36:36.762Z" title="更新于 2024-02-26 19:36:36">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3-provide%E4%B8%8Einject/">Vue3 provide与inject</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">333</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>1分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 provide与inject"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="provide与inject"><a href="#provide与inject" class="headerlink" title="provide与inject"></a>provide与inject</h2><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_22.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 provide与inject</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3-provide%E4%B8%8Einject/">Vue3 provide与inject</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">333</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>1分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 provide与inject"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="provide与inject"><a href="#provide与inject" class="headerlink" title="provide与inject"></a>provide与inject</h2><ul>
 <li>作用： 实现祖孙组件的通信(其实 所有的后代都能接受到数据，隔了多少代都可以，一代也不搁的也可以)</li>
 <li>用法：父组件有一个<code>provide</code>来提供数据，后代组件有一个<code>inject</code>来接收数据；</li>
 </ul>
@@ -141,8 +141,8 @@
 
 <figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 孙组件,中间还隔了一个父组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is grandSon<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;price&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; inject, toRefs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> car = <span class="title function_">inject</span>(<span class="string">&quot;myCar&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(car);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 直接将获取到的响应式数据,解构;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      ...<span class="title function_">toRefs</span>(car),</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845154916provide.png" alt="inject"></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/6d48bcfd.html">https://fsllala.top/articles/6d48bcfd.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3-provide%E4%B8%8Einject/">Vue3 provide与inject</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_22.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/7db1b1fe.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_18.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3 watch</div></div></a></div><div class="next-post pull-right"><a href="/articles/5ca213d8.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_25.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3 Suspense</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#provide%E4%B8%8Einject"><span class="toc-number">1.</span> <span class="toc-text">provide与inject</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656845154916provide.png" alt="inject"></p>
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/6d48bcfd.html">https://fsllala.top/articles/6d48bcfd.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3-provide%E4%B8%8Einject/">Vue3 provide与inject</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_22.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/7db1b1fe.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_18.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3 watch</div></div></a></div><div class="next-post pull-right"><a href="/articles/5ca213d8.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_25.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3 Suspense</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#provide%E4%B8%8Einject"><span class="toc-number">1.</span> <span class="toc-text">provide与inject</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/6e473482.html b/articles/6e473482.html
index 6d307e85..02c93cb3 100644
--- a/articles/6e473482.html
+++ b/articles/6e473482.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:40:25'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_37.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">栈内存和堆内存</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:40:25.480Z" title="更新于 2024-02-26 19:40:25">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/">栈内存和堆内存</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">755</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>2分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="栈内存和堆内存"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="栈内存和堆内存"><a href="#栈内存和堆内存" class="headerlink" title="栈内存和堆内存"></a>栈内存和堆内存</h2><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_37.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">栈内存和堆内存</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.878Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/">栈内存和堆内存</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">755</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>2分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="栈内存和堆内存"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="栈内存和堆内存"><a href="#栈内存和堆内存" class="headerlink" title="栈内存和堆内存"></a>栈内存和堆内存</h2><blockquote>
 <p>我们知道程序是需要加载到内存中来执行的，我们可以将内存划分为两个区域：<strong>栈内存和堆内存</strong>。</p>
 </blockquote>
 <ul>
@@ -159,38 +159,38 @@ <h3 id="值类型和引用类型"><a href="#值类型和引用类型" class="hea
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> name = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> age = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">foo</span>: <span class="string">&quot;foo&quot;</span>,</span><br><span class="line">    <span class="attr">bar</span>: <span class="number">123</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> nickName = name;</span><br><span class="line"><span class="keyword">const</span> info = obj;</span><br><span class="line">info.<span class="property">foo</span> = <span class="string">&quot;hahaha&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">foo</span>);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672153266310stack.png" alt="stack"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1672153266310stack.png" alt="stack"></p>
 <h3 id="变量的比较"><a href="#变量的比较" class="headerlink" title="变量的比较"></a>变量的比较</h3><blockquote>
 <p>基本数据类型比较的是值；引用数据类型比较的是地址；</p>
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">const</span> b = <span class="number">123</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a === b); <span class="comment">//true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> m = &#123;&#125;;</span><br><span class="line"><span class="keyword">const</span> n = &#123;&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m === n); <span class="comment">//false</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672153284493heap.png" alt="heap"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1672153284493heap.png" alt="heap"></p>
 <h3 id="引用的赋值"><a href="#引用的赋值" class="headerlink" title="引用的赋值"></a>引用的赋值</h3><blockquote>
 <p>info是个对象，在栈内存中保存的是一个指针，在堆内存中保存的是代码；<code>info.friend</code>又是一个对象，保存一个指针，在堆内存中开辟新的内存来保存<code>info.friend</code>中的代码；所以<code>info.friend</code>为一个指针，赋值给了friend；</p>
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> info = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;why&quot;</span>,</span><br><span class="line">    <span class="attr">friend</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>:<span class="string">&quot;kobe&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> friend =info.<span class="property">friend</span>;</span><br><span class="line">friend.<span class="property">name</span>=<span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">friend</span>); <span class="comment">//fsllala</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672154427505fuzhi.png" alt="fuzhi"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1672154427505fuzhi.png" alt="fuzhi"></p>
 <h3 id="值传递和引用传递的区别"><a href="#值传递和引用传递的区别" class="headerlink" title="值传递和引用传递的区别"></a>值传递和引用传递的区别</h3><h4 id="值传递"><a href="#值传递" class="headerlink" title="值传递"></a>值传递</h4><blockquote>
 <p>在栈内存中进行赋值，<code>const num = 100</code>基本数据类型，直接赋值；<code>foo(num)</code>其实是<code>foo(100)</code>；即<code>a=100</code>;然后又<code>a=200</code></p>
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    a = <span class="number">200</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> num = <span class="number">100</span>;</span><br><span class="line"><span class="title function_">foo</span>(num);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">//100</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672155794600zhi.png" alt="fuzhi"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1672155794600zhi.png" alt="fuzhi"></p>
 <h4 id="引用传递"><a href="#引用传递" class="headerlink" title="引用传递"></a>引用传递</h4><blockquote>
 <p>在栈内存中进行赋值，引用数据类型赋值的是指针，在堆内存中保存代码；<code>foo(obj)</code>其实是<code>foo(指针)</code>，即<code>a=指针</code>，紧接着，<code>a=&#123;name:&quot;why&quot;&#125;</code>，在堆内存中保存其代码，分配一个新的指针给a，即<code>a=指针2</code></p>
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    a = &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;why&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;obj&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">foo</span>(obj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);  <span class="comment">//&#123;name:&quot;obj&quot;&#125;</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672156492006OBJ.png" alt="obj"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1672156492006OBJ.png" alt="obj"></p>
 <blockquote>
 <p>同上面相比，上面是新开辟了一个堆内存，这个是通过指针对堆地址的代码进行了修改；</p>
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">a.<span class="property">name</span> = <span class="string">&quot;why&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line"><span class="attr">name</span>: <span class="string">&quot;obj&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">foo</span>(obj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span>);  <span class="comment">//why</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672157849228obj.png" alt="obj"></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/6e473482.html">https://fsllala.top/articles/6e473482.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/">栈内存和堆内存</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_37.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/58add7e9.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_29.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">跨域</div></div></a></div><div class="next-post pull-right"><a href="/articles/e98504f5.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_28.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">深浅拷贝</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98"><span class="toc-number">1.</span> <span class="toc-text">栈内存和堆内存</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%80%BC%E7%B1%BB%E5%9E%8B%E5%92%8C%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.1.</span> <span class="toc-text">值类型和引用类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E6%AF%94%E8%BE%83"><span class="toc-number">1.2.</span> <span class="toc-text">变量的比较</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%95%E7%94%A8%E7%9A%84%E8%B5%8B%E5%80%BC"><span class="toc-number">1.3.</span> <span class="toc-text">引用的赋值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%80%BC%E4%BC%A0%E9%80%92%E5%92%8C%E5%BC%95%E7%94%A8%E4%BC%A0%E9%80%92%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.4.</span> <span class="toc-text">值传递和引用传递的区别</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%80%BC%E4%BC%A0%E9%80%92"><span class="toc-number">1.4.1.</span> <span class="toc-text">值传递</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%95%E7%94%A8%E4%BC%A0%E9%80%92"><span class="toc-number">1.4.2.</span> <span class="toc-text">引用传递</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1672157849228obj.png" alt="obj"></p>
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/6e473482.html">https://fsllala.top/articles/6e473482.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/">栈内存和堆内存</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_37.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/58add7e9.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_29.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">跨域</div></div></a></div><div class="next-post pull-right"><a href="/articles/e98504f5.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_28.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">深浅拷贝</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98"><span class="toc-number">1.</span> <span class="toc-text">栈内存和堆内存</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%80%BC%E7%B1%BB%E5%9E%8B%E5%92%8C%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.1.</span> <span class="toc-text">值类型和引用类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E6%AF%94%E8%BE%83"><span class="toc-number">1.2.</span> <span class="toc-text">变量的比较</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%95%E7%94%A8%E7%9A%84%E8%B5%8B%E5%80%BC"><span class="toc-number">1.3.</span> <span class="toc-text">引用的赋值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%80%BC%E4%BC%A0%E9%80%92%E5%92%8C%E5%BC%95%E7%94%A8%E4%BC%A0%E9%80%92%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.4.</span> <span class="toc-text">值传递和引用传递的区别</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%80%BC%E4%BC%A0%E9%80%92"><span class="toc-number">1.4.1.</span> <span class="toc-text">值传递</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%95%E7%94%A8%E4%BC%A0%E9%80%92"><span class="toc-number">1.4.2.</span> <span class="toc-text">引用传递</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/7067fd0d.html b/articles/7067fd0d.html
index 2c40a60c..cf7c9168 100644
--- a/articles/7067fd0d.html
+++ b/articles/7067fd0d.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:35:45'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_16.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">TypeScript</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:35:45.630Z" title="更新于 2024-02-26 19:35:45">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/TypeScript/">TypeScript</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">12.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>53分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="TypeScript"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="TypeScript是什么"><a href="#TypeScript是什么" class="headerlink" title="TypeScript是什么"></a>TypeScript是什么</h2><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_16.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">TypeScript</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/TypeScript/">TypeScript</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">12.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>53分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="TypeScript"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="TypeScript是什么"><a href="#TypeScript是什么" class="headerlink" title="TypeScript是什么"></a>TypeScript是什么</h2><ul>
 <li>TS是JS的超集，所以JS基础的类型都包含在内</li>
 </ul>
 <h2 id="TypeScript开发环境搭建"><a href="#TypeScript开发环境搭建" class="headerlink" title="TypeScript开发环境搭建"></a>TypeScript开发环境搭建</h2><ol>
@@ -176,7 +176,7 @@ <h3 id="空值类型"><a href="#空值类型" class="headerlink" title="空值
 <p>如果你配置了tsconfig.json 开启了严格模式: 则 null 不能 赋予 void 类型 </p>
 <figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;compilerOptions&quot;</span>:&#123;</span><br><span class="line">        <span class="string">&quot;strict&quot;</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/void1674789861382.png" alt="void"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/void1674789861382.png" alt="void"></p>
 <p><strong>解决方法：</strong></p>
 <ol>
 <li><code>tsc --init</code>创建tsconfig文件；</li>
@@ -189,7 +189,7 @@ <h3 id="void-和-undefined-和-null-最大的区别"><a href="#void-和-undefine
 </blockquote>
 <figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">u</span>: <span class="built_in">void</span> = <span class="literal">undefined</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>: <span class="literal">null</span> = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>: <span class="built_in">string</span> = <span class="string">&quot;123&quot;</span>;</span><br><span class="line">str = u;</span><br><span class="line"><span class="comment">// 这个就会报错了，会提示你不能将类型“void”分配给类型“string”</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/void21674791309884.png" alt="void"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/void21674791309884.png" alt="void"></p>
 <blockquote>
 <p>下面这样undefined与null可以赋值</p>
 </blockquote>
@@ -416,11 +416,11 @@ <h3 id="DOM-和-BOM-的内置对象"><a href="#DOM-和-BOM-的内置对象" clas
 <figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">body</span>: <span class="title class_">HTMLElement</span> = <span class="variable language_">document</span>.<span class="property">body</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">allDiv</span>: <span class="title class_">NodeList</span> = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line"><span class="comment">//读取div 这种需要类型断言 或者加个判断应为读不到返回null</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">div</span>:<span class="title class_">HTMLElement</span> = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>) <span class="keyword">as</span> <span class="title class_">HTMLDivElement</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params">e: MouseEvent</span>) &#123;</span><br><span class="line">    </span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//dom元素的映射表</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">HTMLElementTagNameMap</span> &#123;</span><br><span class="line">    <span class="string">&quot;a&quot;</span>: <span class="title class_">HTMLAnchorElement</span>;</span><br><span class="line">    <span class="string">&quot;abbr&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;address&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;applet&quot;</span>: <span class="title class_">HTMLAppletElement</span>;</span><br><span class="line">    <span class="string">&quot;area&quot;</span>: <span class="title class_">HTMLAreaElement</span>;</span><br><span class="line">    <span class="string">&quot;article&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;aside&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;audio&quot;</span>: <span class="title class_">HTMLAudioElement</span>;</span><br><span class="line">    <span class="string">&quot;b&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;base&quot;</span>: <span class="title class_">HTMLBaseElement</span>;</span><br><span class="line">    <span class="string">&quot;bdi&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;bdo&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;blockquote&quot;</span>: <span class="title class_">HTMLQuoteElement</span>;</span><br><span class="line">    <span class="string">&quot;body&quot;</span>: <span class="title class_">HTMLBodyElement</span>;</span><br><span class="line">    <span class="string">&quot;br&quot;</span>: <span class="title class_">HTMLBRElement</span>;</span><br><span class="line">    <span class="string">&quot;button&quot;</span>: <span class="title class_">HTMLButtonElement</span>;</span><br><span class="line">    <span class="string">&quot;canvas&quot;</span>: <span class="title class_">HTMLCanvasElement</span>;</span><br><span class="line">    <span class="string">&quot;caption&quot;</span>: <span class="title class_">HTMLTableCaptionElement</span>;</span><br><span class="line">    <span class="string">&quot;cite&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;code&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;col&quot;</span>: <span class="title class_">HTMLTableColElement</span>;</span><br><span class="line">    <span class="string">&quot;colgroup&quot;</span>: <span class="title class_">HTMLTableColElement</span>;</span><br><span class="line">    <span class="string">&quot;data&quot;</span>: <span class="title class_">HTMLDataElement</span>;</span><br><span class="line">    <span class="string">&quot;datalist&quot;</span>: <span class="title class_">HTMLDataListElement</span>;</span><br><span class="line">    <span class="string">&quot;dd&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;del&quot;</span>: <span class="title class_">HTMLModElement</span>;</span><br><span class="line">    <span class="string">&quot;details&quot;</span>: <span class="title class_">HTMLDetailsElement</span>;</span><br><span class="line">    <span class="string">&quot;dfn&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;dialog&quot;</span>: <span class="title class_">HTMLDialogElement</span>;</span><br><span class="line">    <span class="string">&quot;dir&quot;</span>: <span class="title class_">HTMLDirectoryElement</span>;</span><br><span class="line">    <span class="string">&quot;div&quot;</span>: <span class="title class_">HTMLDivElement</span>;</span><br><span class="line">    <span class="string">&quot;dl&quot;</span>: <span class="title class_">HTMLDListElement</span>;</span><br><span class="line">    <span class="string">&quot;dt&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;em&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;embed&quot;</span>: <span class="title class_">HTMLEmbedElement</span>;</span><br><span class="line">    <span class="string">&quot;fieldset&quot;</span>: <span class="title class_">HTMLFieldSetElement</span>;</span><br><span class="line">    <span class="string">&quot;figcaption&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;figure&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;font&quot;</span>: <span class="title class_">HTMLFontElement</span>;</span><br><span class="line">    <span class="string">&quot;footer&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;form&quot;</span>: <span class="title class_">HTMLFormElement</span>;</span><br><span class="line">    <span class="string">&quot;frame&quot;</span>: <span class="title class_">HTMLFrameElement</span>;</span><br><span class="line">    <span class="string">&quot;frameset&quot;</span>: <span class="title class_">HTMLFrameSetElement</span>;</span><br><span class="line">    <span class="string">&quot;h1&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h2&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h3&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h4&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h5&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h6&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;head&quot;</span>: <span class="title class_">HTMLHeadElement</span>;</span><br><span class="line">    <span class="string">&quot;header&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;hgroup&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;hr&quot;</span>: <span class="title class_">HTMLHRElement</span>;</span><br><span class="line">    <span class="string">&quot;html&quot;</span>: <span class="title class_">HTMLHtmlElement</span>;</span><br><span class="line">    <span class="string">&quot;i&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;iframe&quot;</span>: <span class="title class_">HTMLIFrameElement</span>;</span><br><span class="line">    <span class="string">&quot;img&quot;</span>: <span class="title class_">HTMLImageElement</span>;</span><br><span class="line">    <span class="string">&quot;input&quot;</span>: <span class="title class_">HTMLInputElement</span>;</span><br><span class="line">    <span class="string">&quot;ins&quot;</span>: <span class="title class_">HTMLModElement</span>;</span><br><span class="line">    <span class="string">&quot;kbd&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;label&quot;</span>: <span class="title class_">HTMLLabelElement</span>;</span><br><span class="line">    <span class="string">&quot;legend&quot;</span>: <span class="title class_">HTMLLegendElement</span>;</span><br><span class="line">    <span class="string">&quot;li&quot;</span>: <span class="title class_">HTMLLIElement</span>;</span><br><span class="line">    <span class="string">&quot;link&quot;</span>: <span class="title class_">HTMLLinkElement</span>;</span><br><span class="line">    <span class="string">&quot;main&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;map&quot;</span>: <span class="title class_">HTMLMapElement</span>;</span><br><span class="line">    <span class="string">&quot;mark&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;marquee&quot;</span>: <span class="title class_">HTMLMarqueeElement</span>;</span><br><span class="line">    <span class="string">&quot;menu&quot;</span>: <span class="title class_">HTMLMenuElement</span>;</span><br><span class="line">    <span class="string">&quot;meta&quot;</span>: <span class="title class_">HTMLMetaElement</span>;</span><br><span class="line">    <span class="string">&quot;meter&quot;</span>: <span class="title class_">HTMLMeterElement</span>;</span><br><span class="line">    <span class="string">&quot;nav&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;noscript&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;object&quot;</span>: <span class="title class_">HTMLObjectElement</span>;</span><br><span class="line">    <span class="string">&quot;ol&quot;</span>: <span class="title class_">HTMLOListElement</span>;</span><br><span class="line">    <span class="string">&quot;optgroup&quot;</span>: <span class="title class_">HTMLOptGroupElement</span>;</span><br><span class="line">    <span class="string">&quot;option&quot;</span>: <span class="title class_">HTMLOptionElement</span>;</span><br><span class="line">    <span class="string">&quot;output&quot;</span>: <span class="title class_">HTMLOutputElement</span>;</span><br><span class="line">    <span class="string">&quot;p&quot;</span>: <span class="title class_">HTMLParagraphElement</span>;</span><br><span class="line">    <span class="string">&quot;param&quot;</span>: <span class="title class_">HTMLParamElement</span>;</span><br><span class="line">    <span class="string">&quot;picture&quot;</span>: <span class="title class_">HTMLPictureElement</span>;</span><br><span class="line">    <span class="string">&quot;pre&quot;</span>: <span class="title class_">HTMLPreElement</span>;</span><br><span class="line">    <span class="string">&quot;progress&quot;</span>: <span class="title class_">HTMLProgressElement</span>;</span><br><span class="line">    <span class="string">&quot;q&quot;</span>: <span class="title class_">HTMLQuoteElement</span>;</span><br><span class="line">    <span class="string">&quot;rp&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;rt&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;ruby&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;s&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;samp&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;script&quot;</span>: <span class="title class_">HTMLScriptElement</span>;</span><br><span class="line">    <span class="string">&quot;section&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;select&quot;</span>: <span class="title class_">HTMLSelectElement</span>;</span><br><span class="line">    <span class="string">&quot;slot&quot;</span>: <span class="title class_">HTMLSlotElement</span>;</span><br><span class="line">    <span class="string">&quot;small&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;source&quot;</span>: <span class="title class_">HTMLSourceElement</span>;</span><br><span class="line">    <span class="string">&quot;span&quot;</span>: <span class="title class_">HTMLSpanElement</span>;</span><br><span class="line">    <span class="string">&quot;strong&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;style&quot;</span>: <span class="title class_">HTMLStyleElement</span>;</span><br><span class="line">    <span class="string">&quot;sub&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;summary&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;sup&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;table&quot;</span>: <span class="title class_">HTMLTableElement</span>;</span><br><span class="line">    <span class="string">&quot;tbody&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;td&quot;</span>: <span class="title class_">HTMLTableDataCellElement</span>;</span><br><span class="line">    <span class="string">&quot;template&quot;</span>: <span class="title class_">HTMLTemplateElement</span>;</span><br><span class="line">    <span class="string">&quot;textarea&quot;</span>: <span class="title class_">HTMLTextAreaElement</span>;</span><br><span class="line">    <span class="string">&quot;tfoot&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;th&quot;</span>: <span class="title class_">HTMLTableHeaderCellElement</span>;</span><br><span class="line">    <span class="string">&quot;thead&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;time&quot;</span>: <span class="title class_">HTMLTimeElement</span>;</span><br><span class="line">    <span class="string">&quot;title&quot;</span>: <span class="title class_">HTMLTitleElement</span>;</span><br><span class="line">    <span class="string">&quot;tr&quot;</span>: <span class="title class_">HTMLTableRowElement</span>;</span><br><span class="line">    <span class="string">&quot;track&quot;</span>: <span class="title class_">HTMLTrackElement</span>;</span><br><span class="line">    <span class="string">&quot;u&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;ul&quot;</span>: <span class="title class_">HTMLUListElement</span>;</span><br><span class="line">    <span class="string">&quot;var&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;video&quot;</span>: <span class="title class_">HTMLVideoElement</span>;</span><br><span class="line">    <span class="string">&quot;wbr&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
 <h3 id="定义Promise"><a href="#定义Promise" class="headerlink" title="定义Promise"></a>定义Promise</h3><p>如果我们不指定返回的类型TS是推断不出来返回的是什么类型</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/promise1675065334340.png" alt="promise"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/promise1675065334340.png" alt="promise"></p>
 <figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">promise</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(<span class="number">1</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
 <p>指定返回的类型</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/promise21675065518550.png" alt="promise"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/promise21675065518550.png" alt="promise"></p>
  <figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">promise</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>&lt;<span class="built_in">number</span>&gt;(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(<span class="number">1</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
 <p> 函数定义返回promise 语法规则：<code>Promise&lt;T&gt;</code></p>
@@ -432,7 +432,7 @@ <h2 id="Class类"><a href="#Class类" class="headerlink" title="Class类"></a>Cl
 <h3 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h3><p>在TypeScript是不允许直接在constructor 定义变量的</p>
 <figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/class1675069121527.png" alt="class"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/class1675069121527.png" alt="class"></p>
 <p> 需要在constructor上面先声明</p>
 <figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">name11</span>:<span class="built_in">string</span></span><br><span class="line">    <span class="attr">age11</span>:<span class="built_in">number</span></span><br><span class="line">    <span class="attr">sub11</span>:<span class="built_in">boolean</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure>
 
@@ -559,7 +559,7 @@ <h2 id="类型推论-类型别名"><a href="#类型推论-类型别名" class="h
 <p>我声明了一个变量但是没有定义类型</p>
 <p>TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/lxtl1675250862922.png" alt="类型推论"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/lxtl1675250862922.png" alt="类型推论"></p>
 <figure class="highlight typescript"><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"><span class="keyword">let</span> str = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="comment">// 会报错，虽然我们没用明确限制类型，但是TS编辑器会自动推论为string类型。就不能够在赋值给别的类型</span></span><br><span class="line">str = <span class="number">18</span>;  <span class="comment">//这里会报错,提示: 不能将类型“number”分配给类型“string”。 </span></span><br></pre></td></tr></table></figure>
 
 <p>如果你声明变量没有定义类型也没有赋值这时候 TS 会推断成 any 类型可以进行任何操作</p>
@@ -780,7 +780,7 @@ <h2 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a
 
 <figure class="highlight typescript"><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"><span class="comment">// index2.ts</span></span><br><span class="line"><span class="keyword">const</span> name1=<span class="string">&quot;fsllala456&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/namespace1675417635460.png" alt="模块化"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/namespace1675417635460.png" alt="模块化"></p>
 <blockquote>
 <p>什么是模块化？</p>
 </blockquote>
@@ -915,7 +915,7 @@ <h3 id="外部定义类型声明-–-第三方库"><a href="#外部定义类型
 <ol start="2">
 <li>在vue文件中进入第三方库，由于没有声明文件，所以会报错。</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/smwj1688632505923.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/smwj1688632505923.png"></p>
 <ol start="3">
 <li>手写声明文件</li>
 </ol>
@@ -935,7 +935,7 @@ <h3 id="自己代码类型声明"><a href="#自己代码类型声明" class="hea
 </ul>
 <figure class="highlight js"><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">// vue中的 index.html中</span></span><br><span class="line"><span class="comment">// 变量</span></span><br><span class="line"><span class="keyword">const</span> whyName = <span class="string">&quot;Fsllala&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> whyAge = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">const</span> whyHeight = <span class="number">188</span>;</span><br><span class="line"><span class="comment">// 函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">globalFunc</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`this is globalFunction~<span class="subst">$&#123;args&#125;</span>`</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 类</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name, age</span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/smwj21688638518386.png" alt="声明文件"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/smwj21688638518386.png" alt="声明文件"></p>
 <p>上面如果是JS，就可以直接引用了(把script标签中的 “lang&#x3D;’ts’”去掉，就可以用了)；显然是ts的问题；</p>
 <ul>
 <li>新建一个d.ts的声明文件</li>
@@ -948,12 +948,12 @@ <h2 id="Partial"><a href="#Partial" class="headerlink" title="Partial"></a>Parti
 </blockquote>
 <figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 写法: Partial&lt;Type&gt;</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">IKun</span>&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">hobby</span>:<span class="built_in">string</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">IKunOptional</span> = <span class="title class_">Partial</span>&lt;<span class="title class_">IKun</span>&gt;;</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/partial1688641139388.png" alt="Partial"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/partial1688641139388.png" alt="Partial"></p>
 <h2 id="Record-lt-Keys-Type-gt"><a href="#Record-lt-Keys-Type-gt" class="headerlink" title="Record&lt;Keys, Type&gt;"></a>Record&lt;Keys, Type&gt;</h2><blockquote>
 <p>用于构造一个对象类型，它所有的key(键)都是Keys类型，它所有的value(值)都是Type类型。</p>
 </blockquote>
 <figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">IKun</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    hobby?: <span class="built_in">string</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> t1 = <span class="string">&quot;上海&quot;</span> | <span class="string">&quot;北京&quot;</span> | <span class="string">&quot;洛杉矶&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">IKuns</span> = <span class="title class_">Record</span>&lt;t1, <span class="title class_">IKun</span>&gt;;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> *  鼠标放到 IKuns 会显示:</span></span><br><span class="line"><span class="comment"> * type IKuns = &#123;</span></span><br><span class="line"><span class="comment">    上海: IKun;</span></span><br><span class="line"><span class="comment">    北京: IKun;</span></span><br><span class="line"><span class="comment">    洛杉矶: IKun;</span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment"> * 所以说 上海/北京/洛杉矶 一个都不能少</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 上海/北京/洛杉矶 一个都不能少</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">ikuns</span>: <span class="title class_">IKuns</span> = &#123;</span><br><span class="line">    <span class="string">&quot;上海&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;xxx&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&quot;北京&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;xxx&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&quot;洛杉矶&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;xxx&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/7067fd0d.html">https://fsllala.top/articles/7067fd0d.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/TypeScript/">TypeScript</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_16.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/5fc41a6b.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_44.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs 登录凭证</div></div></a></div><div class="next-post pull-right"><a href="/articles/3ef665a6.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">https</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#TypeScript%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">1.</span> <span class="toc-text">TypeScript是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TypeScript%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA"><span class="toc-number">2.</span> <span class="toc-text">TypeScript开发环境搭建</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.</span> <span class="toc-text">基础数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.1.</span> <span class="toc-text">字符串类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%97%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.2.</span> <span class="toc-text">数字类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.3.</span> <span class="toc-text">布尔类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A9%BA%E5%80%BC%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.4.</span> <span class="toc-text">空值类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Null%E5%92%8Cundefined%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.5.</span> <span class="toc-text">Null和undefined类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#void-%E5%92%8C-undefined-%E5%92%8C-null-%E6%9C%80%E5%A4%A7%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">3.6.</span> <span class="toc-text">void 和 undefined 和 null 最大的区别</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NodeJs-%E7%8E%AF%E5%A2%83%E6%89%A7%E8%A1%8CTS"><span class="toc-number">4.</span> <span class="toc-text">NodeJs 环境执行TS</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Any-%E7%B1%BB%E5%9E%8B-%E5%92%8C-unknown-%E9%A1%B6%E7%BA%A7%E7%B1%BB%E5%9E%8B"><span class="toc-number">5.</span> <span class="toc-text">Any 类型 和 unknown 顶级类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#any%E4%B8%8Eunknow%E5%8C%BA%E5%88%AB"><span class="toc-number">5.1.</span> <span class="toc-text">any与unknow区别</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8E%A5%E5%8F%A3%E5%92%8C%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.</span> <span class="toc-text">接口和对象类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#interface%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.1.</span> <span class="toc-text">interface定义对象类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#interface%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.2.</span> <span class="toc-text">interface定义函数类型</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%B1%BB%E5%9E%8B"><span class="toc-number">7.</span> <span class="toc-text">数组类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84"><span class="toc-number">7.1.</span> <span class="toc-text">对象数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%9A%E7%BB%B4%E6%95%B0%E7%BB%84"><span class="toc-number">7.2.</span> <span class="toc-text">多维数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#arguments%E7%B1%BB%E6%95%B0%E7%BB%84"><span class="toc-number">7.3.</span> <span class="toc-text">arguments类数组</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E6%8B%93%E5%B1%95"><span class="toc-number">8.</span> <span class="toc-text">函数拓展</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80-%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B-%E4%BA%A4%E5%8F%89%E7%B1%BB%E5%9E%8B"><span class="toc-number">9.</span> <span class="toc-text">类型断言 | 联合类型 | 交叉类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B"><span class="toc-number">9.1.</span> <span class="toc-text">联合类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%A4%E5%8F%89%E7%B1%BB%E5%9E%8B"><span class="toc-number">9.2.</span> <span class="toc-text">交叉类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80"><span class="toc-number">9.3.</span> <span class="toc-text">类型断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8any%E4%B8%B4%E6%97%B6%E6%96%AD%E8%A8%80"><span class="toc-number">9.4.</span> <span class="toc-text">使用any临时断言</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">10.</span> <span class="toc-text">内置对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#ECMAScript-%E7%9A%84%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">10.1.</span> <span class="toc-text">ECMAScript 的内置对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DOM-%E5%92%8C-BOM-%E7%9A%84%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">10.2.</span> <span class="toc-text">DOM 和 BOM 的内置对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89Promise"><span class="toc-number">10.3.</span> <span class="toc-text">定义Promise</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Class%E7%B1%BB"><span class="toc-number">11.</span> <span class="toc-text">Class类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89"><span class="toc-number">11.1.</span> <span class="toc-text">定义</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E7%9A%84%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-number">11.2.</span> <span class="toc-text">类的修饰符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#static-%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7-%E5%92%8C-%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95"><span class="toc-number">11.3.</span> <span class="toc-text">static 静态属性 和 静态方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#interface-%E5%AE%9A%E4%B9%89%E7%B1%BB"><span class="toc-number">11.4.</span> <span class="toc-text">interface 定义类</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8A%BD%E8%B1%A1%E7%B1%BB"><span class="toc-number">11.5.</span> <span class="toc-text">抽象类</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%83%E7%BB%84%E7%B1%BB%E5%9E%8B"><span class="toc-number">12.</span> <span class="toc-text">元组类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9E%9A%E4%B8%BE%E7%B1%BB%E5%9E%8B"><span class="toc-number">13.</span> <span class="toc-text">枚举类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%97%E6%9E%9A%E4%B8%BE"><span class="toc-number">13.1.</span> <span class="toc-text">数字枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%9E%9A%E4%B8%BE"><span class="toc-number">13.2.</span> <span class="toc-text">字符串枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%82%E6%9E%84%E6%9E%9A%E4%B8%BE"><span class="toc-number">13.3.</span> <span class="toc-text">异构枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A5%E5%8F%A3%E6%9E%9A%E4%B8%BE"><span class="toc-number">13.4.</span> <span class="toc-text">接口枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#const%E6%9E%9A%E4%B8%BE"><span class="toc-number">13.5.</span> <span class="toc-text">const枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%8D%E5%90%91%E6%98%A0%E5%B0%84"><span class="toc-number">13.6.</span> <span class="toc-text">反向映射</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%8E%A8%E8%AE%BA-%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D"><span class="toc-number">14.</span> <span class="toc-text">类型推论|类型别名</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%8E%A8%E8%AE%BA"><span class="toc-number">14.1.</span> <span class="toc-text">类型推论</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D"><span class="toc-number">14.2.</span> <span class="toc-text">类型别名</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#never%E7%B1%BB%E5%9E%8B"><span class="toc-number">15.</span> <span class="toc-text">never类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#symbol%E7%B1%BB%E5%9E%8B"><span class="toc-number">16.</span> <span class="toc-text">symbol类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Symbol-iterator-%E8%BF%AD%E4%BB%A3%E5%99%A8-%E5%92%8C-%E7%94%9F%E6%88%90%E5%99%A8-for-of"><span class="toc-number">16.1.</span> <span class="toc-text">Symbol.iterator 迭代器 和 生成器 for of</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%BF%AD%E4%BB%A3%E5%99%A8"><span class="toc-number">16.1.1.</span> <span class="toc-text">迭代器</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B"><span class="toc-number">17.</span> <span class="toc-text">泛型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E6%B3%9B%E5%9E%8B"><span class="toc-number">17.1.</span> <span class="toc-text">函数泛型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B%E6%8E%A5%E5%8F%A3"><span class="toc-number">17.2.</span> <span class="toc-text">泛型接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B%E7%B1%BB"><span class="toc-number">17.3.</span> <span class="toc-text">泛型类</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B%E7%BA%A6%E6%9D%9F"><span class="toc-number">17.4.</span> <span class="toc-text">泛型约束</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">17.5.</span> <span class="toc-text">参考文献</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">18.</span> <span class="toc-text">模块化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#ES-Module"><span class="toc-number">18.1.</span> <span class="toc-text">ES Module</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#ES6%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">18.1.1.</span> <span class="toc-text">ES6模块化</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B%E5%AF%BC%E5%85%A5"><span class="toc-number">18.1.2.</span> <span class="toc-text">内置类型导入</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#namespace%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4"><span class="toc-number">18.2.</span> <span class="toc-text">namespace命名空间</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#namespace%E5%B8%B8%E8%A7%84%E5%86%99%E6%B3%95"><span class="toc-number">18.2.1.</span> <span class="toc-text">namespace常规写法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4"><span class="toc-number">18.2.2.</span> <span class="toc-text">嵌套命名空间</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8A%BD%E7%A6%BB%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4"><span class="toc-number">18.2.3.</span> <span class="toc-text">抽离命名空间</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%AE%80%E5%8C%96%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4"><span class="toc-number">18.2.4.</span> <span class="toc-text">简化命名空间</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#in%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-number">19.</span> <span class="toc-text">in操作符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E6%96%9C%E7%BA%BF%E6%8C%87%E4%BB%A4"><span class="toc-number">20.</span> <span class="toc-text">三斜线指令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A3%B0%E6%98%8E%E6%96%87%E4%BB%B6"><span class="toc-number">21.</span> <span class="toc-text">声明文件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%96%E9%83%A8%E5%AE%9A%E4%B9%89%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E-%E2%80%93-%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93"><span class="toc-number">21.1.</span> <span class="toc-text">外部定义类型声明 – 第三方库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%B7%B1%E4%BB%A3%E7%A0%81%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E"><span class="toc-number">21.2.</span> <span class="toc-text">自己代码类型声明</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Partial"><span class="toc-number">22.</span> <span class="toc-text">Partial</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Record-lt-Keys-Type-gt"><span class="toc-number">23.</span> <span class="toc-text">Record&lt;Keys, Type&gt;</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/7067fd0d.html">https://fsllala.top/articles/7067fd0d.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/TypeScript/">TypeScript</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_16.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/5fc41a6b.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_44.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs 登录凭证</div></div></a></div><div class="next-post pull-right"><a href="/articles/3ef665a6.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">https</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#TypeScript%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">1.</span> <span class="toc-text">TypeScript是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TypeScript%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA"><span class="toc-number">2.</span> <span class="toc-text">TypeScript开发环境搭建</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.</span> <span class="toc-text">基础数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.1.</span> <span class="toc-text">字符串类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%97%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.2.</span> <span class="toc-text">数字类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.3.</span> <span class="toc-text">布尔类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A9%BA%E5%80%BC%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.4.</span> <span class="toc-text">空值类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Null%E5%92%8Cundefined%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.5.</span> <span class="toc-text">Null和undefined类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#void-%E5%92%8C-undefined-%E5%92%8C-null-%E6%9C%80%E5%A4%A7%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">3.6.</span> <span class="toc-text">void 和 undefined 和 null 最大的区别</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NodeJs-%E7%8E%AF%E5%A2%83%E6%89%A7%E8%A1%8CTS"><span class="toc-number">4.</span> <span class="toc-text">NodeJs 环境执行TS</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Any-%E7%B1%BB%E5%9E%8B-%E5%92%8C-unknown-%E9%A1%B6%E7%BA%A7%E7%B1%BB%E5%9E%8B"><span class="toc-number">5.</span> <span class="toc-text">Any 类型 和 unknown 顶级类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#any%E4%B8%8Eunknow%E5%8C%BA%E5%88%AB"><span class="toc-number">5.1.</span> <span class="toc-text">any与unknow区别</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8E%A5%E5%8F%A3%E5%92%8C%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.</span> <span class="toc-text">接口和对象类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#interface%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.1.</span> <span class="toc-text">interface定义对象类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#interface%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.2.</span> <span class="toc-text">interface定义函数类型</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%B1%BB%E5%9E%8B"><span class="toc-number">7.</span> <span class="toc-text">数组类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84"><span class="toc-number">7.1.</span> <span class="toc-text">对象数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%9A%E7%BB%B4%E6%95%B0%E7%BB%84"><span class="toc-number">7.2.</span> <span class="toc-text">多维数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#arguments%E7%B1%BB%E6%95%B0%E7%BB%84"><span class="toc-number">7.3.</span> <span class="toc-text">arguments类数组</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E6%8B%93%E5%B1%95"><span class="toc-number">8.</span> <span class="toc-text">函数拓展</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80-%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B-%E4%BA%A4%E5%8F%89%E7%B1%BB%E5%9E%8B"><span class="toc-number">9.</span> <span class="toc-text">类型断言 | 联合类型 | 交叉类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B"><span class="toc-number">9.1.</span> <span class="toc-text">联合类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%A4%E5%8F%89%E7%B1%BB%E5%9E%8B"><span class="toc-number">9.2.</span> <span class="toc-text">交叉类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80"><span class="toc-number">9.3.</span> <span class="toc-text">类型断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8any%E4%B8%B4%E6%97%B6%E6%96%AD%E8%A8%80"><span class="toc-number">9.4.</span> <span class="toc-text">使用any临时断言</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">10.</span> <span class="toc-text">内置对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#ECMAScript-%E7%9A%84%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">10.1.</span> <span class="toc-text">ECMAScript 的内置对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DOM-%E5%92%8C-BOM-%E7%9A%84%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">10.2.</span> <span class="toc-text">DOM 和 BOM 的内置对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89Promise"><span class="toc-number">10.3.</span> <span class="toc-text">定义Promise</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Class%E7%B1%BB"><span class="toc-number">11.</span> <span class="toc-text">Class类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89"><span class="toc-number">11.1.</span> <span class="toc-text">定义</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E7%9A%84%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-number">11.2.</span> <span class="toc-text">类的修饰符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#static-%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7-%E5%92%8C-%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95"><span class="toc-number">11.3.</span> <span class="toc-text">static 静态属性 和 静态方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#interface-%E5%AE%9A%E4%B9%89%E7%B1%BB"><span class="toc-number">11.4.</span> <span class="toc-text">interface 定义类</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8A%BD%E8%B1%A1%E7%B1%BB"><span class="toc-number">11.5.</span> <span class="toc-text">抽象类</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%83%E7%BB%84%E7%B1%BB%E5%9E%8B"><span class="toc-number">12.</span> <span class="toc-text">元组类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9E%9A%E4%B8%BE%E7%B1%BB%E5%9E%8B"><span class="toc-number">13.</span> <span class="toc-text">枚举类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%97%E6%9E%9A%E4%B8%BE"><span class="toc-number">13.1.</span> <span class="toc-text">数字枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%9E%9A%E4%B8%BE"><span class="toc-number">13.2.</span> <span class="toc-text">字符串枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%82%E6%9E%84%E6%9E%9A%E4%B8%BE"><span class="toc-number">13.3.</span> <span class="toc-text">异构枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A5%E5%8F%A3%E6%9E%9A%E4%B8%BE"><span class="toc-number">13.4.</span> <span class="toc-text">接口枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#const%E6%9E%9A%E4%B8%BE"><span class="toc-number">13.5.</span> <span class="toc-text">const枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%8D%E5%90%91%E6%98%A0%E5%B0%84"><span class="toc-number">13.6.</span> <span class="toc-text">反向映射</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%8E%A8%E8%AE%BA-%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D"><span class="toc-number">14.</span> <span class="toc-text">类型推论|类型别名</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%8E%A8%E8%AE%BA"><span class="toc-number">14.1.</span> <span class="toc-text">类型推论</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D"><span class="toc-number">14.2.</span> <span class="toc-text">类型别名</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#never%E7%B1%BB%E5%9E%8B"><span class="toc-number">15.</span> <span class="toc-text">never类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#symbol%E7%B1%BB%E5%9E%8B"><span class="toc-number">16.</span> <span class="toc-text">symbol类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Symbol-iterator-%E8%BF%AD%E4%BB%A3%E5%99%A8-%E5%92%8C-%E7%94%9F%E6%88%90%E5%99%A8-for-of"><span class="toc-number">16.1.</span> <span class="toc-text">Symbol.iterator 迭代器 和 生成器 for of</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%BF%AD%E4%BB%A3%E5%99%A8"><span class="toc-number">16.1.1.</span> <span class="toc-text">迭代器</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B"><span class="toc-number">17.</span> <span class="toc-text">泛型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E6%B3%9B%E5%9E%8B"><span class="toc-number">17.1.</span> <span class="toc-text">函数泛型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B%E6%8E%A5%E5%8F%A3"><span class="toc-number">17.2.</span> <span class="toc-text">泛型接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B%E7%B1%BB"><span class="toc-number">17.3.</span> <span class="toc-text">泛型类</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B%E7%BA%A6%E6%9D%9F"><span class="toc-number">17.4.</span> <span class="toc-text">泛型约束</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">17.5.</span> <span class="toc-text">参考文献</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">18.</span> <span class="toc-text">模块化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#ES-Module"><span class="toc-number">18.1.</span> <span class="toc-text">ES Module</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#ES6%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">18.1.1.</span> <span class="toc-text">ES6模块化</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B%E5%AF%BC%E5%85%A5"><span class="toc-number">18.1.2.</span> <span class="toc-text">内置类型导入</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#namespace%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4"><span class="toc-number">18.2.</span> <span class="toc-text">namespace命名空间</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#namespace%E5%B8%B8%E8%A7%84%E5%86%99%E6%B3%95"><span class="toc-number">18.2.1.</span> <span class="toc-text">namespace常规写法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4"><span class="toc-number">18.2.2.</span> <span class="toc-text">嵌套命名空间</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8A%BD%E7%A6%BB%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4"><span class="toc-number">18.2.3.</span> <span class="toc-text">抽离命名空间</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%AE%80%E5%8C%96%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4"><span class="toc-number">18.2.4.</span> <span class="toc-text">简化命名空间</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#in%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-number">19.</span> <span class="toc-text">in操作符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E6%96%9C%E7%BA%BF%E6%8C%87%E4%BB%A4"><span class="toc-number">20.</span> <span class="toc-text">三斜线指令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A3%B0%E6%98%8E%E6%96%87%E4%BB%B6"><span class="toc-number">21.</span> <span class="toc-text">声明文件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%96%E9%83%A8%E5%AE%9A%E4%B9%89%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E-%E2%80%93-%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93"><span class="toc-number">21.1.</span> <span class="toc-text">外部定义类型声明 – 第三方库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%B7%B1%E4%BB%A3%E7%A0%81%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E"><span class="toc-number">21.2.</span> <span class="toc-text">自己代码类型声明</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Partial"><span class="toc-number">22.</span> <span class="toc-text">Partial</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Record-lt-Keys-Type-gt"><span class="toc-number">23.</span> <span class="toc-text">Record&lt;Keys, Type&gt;</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/73805dbf.html b/articles/73805dbf.html
index f6afe52d..a7d3b8a2 100644
--- a/articles/73805dbf.html
+++ b/articles/73805dbf.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:34:59'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs起本地服务</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:34:59.856Z" title="更新于 2024-02-26 19:34:59">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1/">本地服务</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>10分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs起本地服务"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="搭建背景"><a href="#搭建背景" class="headerlink" title="搭建背景"></a>搭建背景</h1><p>客户定制了静态页，我需要将写好的本地文件放置到客户的Windows Server 2016的服务器操作系统上，进而实现局域网的访问。</p>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_11.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs起本地服务</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.895Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1/">本地服务</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>10分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs起本地服务"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="搭建背景"><a href="#搭建背景" class="headerlink" title="搭建背景"></a>搭建背景</h1><p>客户定制了静态页，我需要将写好的本地文件放置到客户的Windows Server 2016的服务器操作系统上，进而实现局域网的访问。</p>
 <h1 id="NodeJs-Express框架"><a href="#NodeJs-Express框架" class="headerlink" title="NodeJs   Express框架"></a>NodeJs   Express框架</h1><p>Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。</p>
 <h1 id="搭建步骤"><a href="#搭建步骤" class="headerlink" title="搭建步骤"></a>搭建步骤</h1><h2 id="安装NodeJs"><a href="#安装NodeJs" class="headerlink" title="安装NodeJs"></a>安装NodeJs</h2><p>官网下载NodeJs,安装即可。</p>
 <h2 id="安装-Express"><a href="#安装-Express" class="headerlink" title="安装 Express"></a>安装 Express</h2><p>安装 Express 并将其保存到依赖列表中：(这里如果是在桌面新建了一个文件夹，然后在文件夹里面cmd，输入如下命令后，文件夹内不会出现node_modules目录，而是在 “C盘–&gt;用户–&gt;现在登录的用户”的目录下)</p>
@@ -226,7 +226,7 @@ <h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考
 <li><a target="_blank" rel="noopener" href="https://blog.csdn.net/yanyang1116/article/details/54837613">res.location()与res.redirect()</a></li>
 <li><a target="_blank" rel="noopener" href="https://blog.csdn.net/yanyang1116/article/details/54837603">Node.js实现301、302重定向服务</a></li>
 </ul>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/73805dbf.html">https://fsllala.top/articles/73805dbf.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs/">NodeJs</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/12a67745.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_17.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Typora常用快捷键</div></div></a></div><div class="next-post pull-right"><a href="/articles/4c664111.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_13.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">PhotoShop</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/46635768.html" title="NodeJs连接MySQL"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-12-30</div><div class="title">NodeJs连接MySQL</div></div></a></div><div><a href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-23</div><div class="title">nvm、npm与nrm</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%90%AD%E5%BB%BA%E8%83%8C%E6%99%AF"><span class="toc-number">1.</span> <span class="toc-text">搭建背景</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#NodeJs-Express%E6%A1%86%E6%9E%B6"><span class="toc-number">2.</span> <span class="toc-text">NodeJs   Express框架</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%90%AD%E5%BB%BA%E6%AD%A5%E9%AA%A4"><span class="toc-number">3.</span> <span class="toc-text">搭建步骤</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85NodeJs"><span class="toc-number">3.1.</span> <span class="toc-text">安装NodeJs</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Express"><span class="toc-number">3.2.</span> <span class="toc-text">安装 Express</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAexpress%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-number">3.3.</span> <span class="toc-text">创建express服务器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAbat"><span class="toc-number">3.4.</span> <span class="toc-text">创建bat</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6"><span class="toc-number">3.5.</span> <span class="toc-text">静态文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E8%AE%BF%E9%97%AE%E5%89%8D%E7%BC%80"><span class="toc-number">3.6.</span> <span class="toc-text">添加访问前缀</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%87%8D%E5%AE%9A%E5%90%91"><span class="toc-number">3.7.</span> <span class="toc-text">重定向</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%80%E7%BB%88%E4%BB%A3%E7%A0%81"><span class="toc-number">3.8.</span> <span class="toc-text">最终代码</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#NodeJs-Koa%E6%A1%86%E6%9E%B6"><span class="toc-number">4.</span> <span class="toc-text">NodeJs Koa框架</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">4.1.</span> <span class="toc-text">参考文献</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/73805dbf.html">https://fsllala.top/articles/73805dbf.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs/">NodeJs</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_11.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/12a67745.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_17.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Typora常用快捷键</div></div></a></div><div class="next-post pull-right"><a href="/articles/4c664111.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_13.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">PhotoShop</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/46635768.html" title="NodeJs连接MySQL"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-12-30</div><div class="title">NodeJs连接MySQL</div></div></a></div><div><a href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-23</div><div class="title">nvm、npm与nrm</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%90%AD%E5%BB%BA%E8%83%8C%E6%99%AF"><span class="toc-number">1.</span> <span class="toc-text">搭建背景</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#NodeJs-Express%E6%A1%86%E6%9E%B6"><span class="toc-number">2.</span> <span class="toc-text">NodeJs   Express框架</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%90%AD%E5%BB%BA%E6%AD%A5%E9%AA%A4"><span class="toc-number">3.</span> <span class="toc-text">搭建步骤</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85NodeJs"><span class="toc-number">3.1.</span> <span class="toc-text">安装NodeJs</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Express"><span class="toc-number">3.2.</span> <span class="toc-text">安装 Express</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAexpress%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-number">3.3.</span> <span class="toc-text">创建express服务器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAbat"><span class="toc-number">3.4.</span> <span class="toc-text">创建bat</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6"><span class="toc-number">3.5.</span> <span class="toc-text">静态文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E8%AE%BF%E9%97%AE%E5%89%8D%E7%BC%80"><span class="toc-number">3.6.</span> <span class="toc-text">添加访问前缀</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%87%8D%E5%AE%9A%E5%90%91"><span class="toc-number">3.7.</span> <span class="toc-text">重定向</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%80%E7%BB%88%E4%BB%A3%E7%A0%81"><span class="toc-number">3.8.</span> <span class="toc-text">最终代码</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#NodeJs-Koa%E6%A1%86%E6%9E%B6"><span class="toc-number">4.</span> <span class="toc-text">NodeJs Koa框架</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">4.1.</span> <span class="toc-text">参考文献</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/799084bf.html b/articles/799084bf.html
index 25872da9..2cc7e9e1 100644
--- a/articles/799084bf.html
+++ b/articles/799084bf.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:34:41'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs Koa2</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:34:41.935Z" title="更新于 2024-02-26 19:34:41">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/Koa2/">Koa2</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>14分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs Koa2"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Koa2"><a href="#Koa2" class="headerlink" title="Koa2"></a>Koa2</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_9.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs Koa2</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.895Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/Koa2/">Koa2</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>14分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs Koa2"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Koa2"><a href="#Koa2" class="headerlink" title="Koa2"></a>Koa2</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><ul>
 <li><a target="_blank" rel="noopener" href="https://koajs.com/">官网</a></li>
 <li>koa2是express同一个团队开发的一个新的Web框架；</li>
 <li>相对于express具有更强的异步处理能力；**(Koa框架的next()函数返回的是一个promise)**</li>
@@ -294,7 +294,7 @@ <h3 id="案例实现"><a href="#案例实现" class="headerlink" title="案例
 <p>Koa异步数据的实现；<strong>koa的next()函数返回的是一个promise</strong></p>
 </blockquote>
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> axios = <span class="built_in">require</span>(<span class="string">&quot;axios&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// koa的next()函数返回的是一个promise</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">middleware1</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">    ctx.<span class="property">message</span> = <span class="string">&quot;aaa&quot;</span>;</span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">    ctx.<span class="property">body</span> = ctx.<span class="property">message</span>; <span class="comment">//完整的ctx.message</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">middleware2</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">    ctx.<span class="property">message</span> += <span class="string">&quot;bbb&quot;</span>;</span><br><span class="line">    <span class="comment">// 如果执行的下一个中间件是一个异步函数,那么next默认不会等到中间件的结果,就会执行下一步操作;</span></span><br><span class="line">    <span class="comment">// 如果我们希望等待下一个异步函数的执行结果,那么需要在next函数前面加await;</span></span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">middleware3</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> axios.<span class="title function_">get</span>(<span class="string">&quot;https://api.vvhan.com/api/love&quot;</span>);</span><br><span class="line">    ctx.<span class="property">message</span> += result.<span class="property">data</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// koa不支持一次注册多个中间件</span></span><br><span class="line">app.<span class="title function_">use</span>(middleware1);</span><br><span class="line">app.<span class="title function_">use</span>(middleware2);</span><br><span class="line">app.<span class="title function_">use</span>(middleware3);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/799084bf.html">https://fsllala.top/articles/799084bf.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs-Koa2/">NodeJs Koa2</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/8ba9ed2d.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs Express</div></div></a></div><div class="next-post pull-right"><a href="/articles/46635768.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs连接MySQL</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/5157567c.html" title="Koa2实战"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-10-28</div><div class="title">Koa2实战</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Koa2"><span class="toc-number">1.</span> <span class="toc-text">Koa2</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E4%BB%8B"><span class="toc-number">1.1.</span> <span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8"><span class="toc-number">1.2.</span> <span class="toc-text">使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#koa2%E5%88%9D%E4%BD%93%E9%AA%8C"><span class="toc-number">1.3.</span> <span class="toc-text">koa2初体验</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#koa2%E4%B8%AD%E9%97%B4%E4%BB%B6"><span class="toc-number">1.4.</span> <span class="toc-text">koa2中间件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#koa2%E8%B7%AF%E7%94%B1"><span class="toc-number">1.5.</span> <span class="toc-text">koa2路由</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#POST%E8%AF%B7%E6%B1%82body%E5%8F%82%E6%95%B0%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.</span> <span class="toc-text">POST请求body参数解析</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%BA%94%E7%94%A8-json-urlencoded-%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.1.</span> <span class="toc-text">中间件应用 - json-urlencoded 解析</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%BA%94%E7%94%A8-form-data-%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.2.</span> <span class="toc-text">中间件应用 - form-data 解析</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%9D%E6%AD%A5%E4%BD%BF%E7%94%A8"><span class="toc-number">1.6.2.1.</span> <span class="toc-text">初步使用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0"><span class="toc-number">1.6.2.2.</span> <span class="toc-text">文件上传</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#GET%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0%E8%A7%A3%E6%9E%90"><span class="toc-number">1.7.</span> <span class="toc-text">GET请求参数解析</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E6%95%B0%E6%8D%AE"><span class="toc-number">1.8.</span> <span class="toc-text">响应数据</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86"><span class="toc-number">1.9.</span> <span class="toc-text">错误处理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Koa2%E4%B8%8Eexpress%E5%8C%BA%E5%88%AB"><span class="toc-number">1.10.</span> <span class="toc-text">Koa2与express区别</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A1%88%E4%BE%8B%E5%AE%9E%E7%8E%B0"><span class="toc-number">1.10.1.</span> <span class="toc-text">案例实现</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/799084bf.html">https://fsllala.top/articles/799084bf.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs-Koa2/">NodeJs Koa2</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_9.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/8ba9ed2d.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_32.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs Express</div></div></a></div><div class="next-post pull-right"><a href="/articles/46635768.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs连接MySQL</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/5157567c.html" title="Koa2实战"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-10-28</div><div class="title">Koa2实战</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Koa2"><span class="toc-number">1.</span> <span class="toc-text">Koa2</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E4%BB%8B"><span class="toc-number">1.1.</span> <span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8"><span class="toc-number">1.2.</span> <span class="toc-text">使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#koa2%E5%88%9D%E4%BD%93%E9%AA%8C"><span class="toc-number">1.3.</span> <span class="toc-text">koa2初体验</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#koa2%E4%B8%AD%E9%97%B4%E4%BB%B6"><span class="toc-number">1.4.</span> <span class="toc-text">koa2中间件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#koa2%E8%B7%AF%E7%94%B1"><span class="toc-number">1.5.</span> <span class="toc-text">koa2路由</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#POST%E8%AF%B7%E6%B1%82body%E5%8F%82%E6%95%B0%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.</span> <span class="toc-text">POST请求body参数解析</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%BA%94%E7%94%A8-json-urlencoded-%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.1.</span> <span class="toc-text">中间件应用 - json-urlencoded 解析</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%BA%94%E7%94%A8-form-data-%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.2.</span> <span class="toc-text">中间件应用 - form-data 解析</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%9D%E6%AD%A5%E4%BD%BF%E7%94%A8"><span class="toc-number">1.6.2.1.</span> <span class="toc-text">初步使用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0"><span class="toc-number">1.6.2.2.</span> <span class="toc-text">文件上传</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#GET%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0%E8%A7%A3%E6%9E%90"><span class="toc-number">1.7.</span> <span class="toc-text">GET请求参数解析</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E6%95%B0%E6%8D%AE"><span class="toc-number">1.8.</span> <span class="toc-text">响应数据</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86"><span class="toc-number">1.9.</span> <span class="toc-text">错误处理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Koa2%E4%B8%8Eexpress%E5%8C%BA%E5%88%AB"><span class="toc-number">1.10.</span> <span class="toc-text">Koa2与express区别</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A1%88%E4%BE%8B%E5%AE%9E%E7%8E%B0"><span class="toc-number">1.10.1.</span> <span class="toc-text">案例实现</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/7cf6476b.html b/articles/7cf6476b.html
index ae2322ae..c728b24d 100644
--- a/articles/7cf6476b.html
+++ b/articles/7cf6476b.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-06-18 16:31:53'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">nvm、npm与nrm</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-06-18T08:31:53.714Z" title="更新于 2024-06-18 16:31:53">2024-06-18</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/nvm/">nvm</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">891</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>3分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="nvm、npm与nrm"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="nvm"><a href="#nvm" class="headerlink" title="nvm"></a>nvm</h1><h2 id="nvm是什么"><a href="#nvm是什么" class="headerlink" title="nvm是什么?"></a>nvm是什么?</h2><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_12.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">nvm、npm与nrm</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/nvm/">nvm</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">891</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>3分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="nvm、npm与nrm"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="nvm"><a href="#nvm" class="headerlink" title="nvm"></a>nvm</h1><h2 id="nvm是什么"><a href="#nvm是什么" class="headerlink" title="nvm是什么?"></a>nvm是什么?</h2><blockquote>
 <p><code>nvm(node.js version manager)</code>即<code>nodejs</code>版本管理器；可以简单操作node版本的切换、安装、查看。。。等等；与<code>npm</code>不同的是，<code>npm</code>是依赖包的管理工具。</p>
 </blockquote>
 <h2 id="为什么需要用nvm"><a href="#为什么需要用nvm" class="headerlink" title="为什么需要用nvm?"></a>为什么需要用nvm?</h2><blockquote>
@@ -145,8 +145,8 @@ <h2 id="nvm的安装"><a href="#nvm的安装" class="headerlink" title="nvm的
 <li><p><code>nvm</code><a target="_blank" rel="noopener" href="https://github.com/coreybutler/nvm-windows">下载链接</a>；</p>
 </li>
 <li><p>安装路径建议不要换，因为用默认的路径环境变量就自动配置好了；即一直<code>Next</code>，啥也不要改；</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvmVersion.png" alt="nvm安装"></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvmVersion2.png" alt="nvm安装"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/nvmVersion.png" alt="nvm安装"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/nvmVersion2.png" alt="nvm安装"></p>
 </li>
 <li><p>通过<code>nvm -v</code>查看是否安装成功了；通过<code>nvm list</code>查看当前电脑上安装了那些版本的<code>node</code>(因为刚才卸载了，所以现在是<code>No installations recognized.</code>)</p>
 </li>
@@ -155,10 +155,10 @@ <h2 id="nvm的安装"><a href="#nvm的安装" class="headerlink" title="nvm的
 
 
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvmLocation.png" alt="配置淘宝镜像"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/nvmLocation.png" alt="配置淘宝镜像"></p>
 </li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvmLocation2.png" alt="配置淘宝镜像"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/nvmLocation2.png" alt="配置淘宝镜像"></p>
 <h2 id="nvm命令"><a href="#nvm命令" class="headerlink" title="nvm命令"></a>nvm命令</h2><ul>
 <li><code>nvm version</code>：查看<code>nvm</code>版本</li>
 <li><code>nvm list</code>：查看当前安装的<code>Node.js</code>的所有版本**(常用)**</li>
@@ -185,20 +185,20 @@ <h2 id="安装node"><a href="#安装node" class="headerlink" title="安装node">
 </ol>
 <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvmNode.png" alt="安装Node"></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/v1.png" alt="查看当前node版本"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/nvmNode.png" alt="安装Node"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/v1.png" alt="查看当前node版本"></p>
 </li>
 </ul>
 <ol start="4">
 <li>多个版本的<code>node</code>切换：这里又安装了10.15.0版本的<code>node</code>，通过<code>nvm use 10.15.0</code>切换了版本号；</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/vv.png" alt="安装多个node版本"></p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/v2.png" alt="查看当前node版本"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/vv.png" alt="安装多个node版本"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/v2.png" alt="查看当前node版本"></p>
 <h1 id="npm"><a href="#npm" class="headerlink" title="npm"></a>npm</h1><blockquote>
 <p>npm（Node Package Manager），Node.js 的包管理器，安装 Node.js 之后自带 npm，无需单独安装。💓</p>
 </blockquote>
 <h2 id="查看版本"><a href="#查看版本" class="headerlink" title="查看版本"></a>查看版本</h2><p>输入 npm -v 来查看当前 npm 的版本</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/npm1673616215090.png" alt="npm"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/npm1673616215090.png" alt="npm"></p>
 <h1 id="nrm"><a href="#nrm" class="headerlink" title="nrm"></a>nrm</h1><blockquote>
 <p>nrm（<a target="_blank" rel="noopener" href="https://github.com/Pana/nrm">NPM registry manager</a>），国内使用 npm 官方源来安装包的时候比较慢，所以经常会需要修改 npm 源地址。npm 倒是提供了修改源的方法，但是 nrm 更加方便快捷。💓</p>
 </blockquote>
@@ -207,23 +207,23 @@ <h2 id="nrm的安装"><a href="#nrm的安装" class="headerlink" title="nrm的
 <h2 id="nrm命令"><a href="#nrm命令" class="headerlink" title="nrm命令"></a>nrm命令</h2><ul>
 <li><code>nrm ls</code>：查看全部镜像源(按道理说应该有*来展示目前所用的源，但现在没，原因见下文)</li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nrm1673616739921.png" alt="nrm"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/nrm1673616739921.png" alt="nrm"></p>
 <ul>
 <li><code>nrm current</code>：查看当前源(按道理说应该有目前所用的源，但现在没，原因见下文)</li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvm51673617677730.png" alt="nrm"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/nvm51673617677730.png" alt="nrm"></p>
 <ul>
 <li><code>nrm use taobao</code>：切换成<code> taobao</code> 镜像源</li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nrm21673616980714.png" alt="nrm"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/nrm21673616980714.png" alt="nrm"></p>
 <ul>
 <li><code>nrm test</code>：测速并查看当前所用源(前面有*)</li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nrm31673617213610.png" alt="nrm"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/nrm31673617213610.png" alt="nrm"></p>
 <ul>
 <li><code>nrm -h</code>：查看帮助</li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nrm41673617362687.png" alt="nrm"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/nrm41673617362687.png" alt="nrm"></p>
 <h2 id="解决nrm-ls命令没有-（星号）的问题"><a href="#解决nrm-ls命令没有-（星号）的问题" class="headerlink" title="解决nrm ls命令没有*（星号）的问题"></a>解决nrm ls命令没有*（星号）的问题</h2><blockquote>
 <p>当在终端里执行<code>nrm ls</code>指令查看我们的镜像源时，我发现列表中并没有星号存在，一般情况下星号表示目前所处的镜像源，但是没有星号我们根本不知道目前在使用哪个镜像源；并且执行<code>nrm current</code>指令也没有反应。（可能是版本的问题）</p>
 </blockquote>
@@ -235,13 +235,13 @@ <h2 id="解决nrm-ls命令没有-（星号）的问题"><a href="#解决nrm-ls
 <ol start="2">
 <li>验证</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nrm61673618254488.png" alt="nrm"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/nrm61673618254488.png" alt="nrm"></p>
 <h1 id="相关链接"><a href="#相关链接" class="headerlink" title="相关链接"></a>相关链接</h1><p><a target="_blank" rel="noopener" href="https://blog.csdn.net/QWERTYQ16/article/details/124497532">nvm的简介、安装、使用（简单明了）</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_34996079/article/details/122934045">nvm 切换node报错 exit status 1: �ܾ����ʡ�</a></p>
 <p><a target="_blank" rel="noopener" href="https://tzy1997.com/articles/hexo1606/">nvm与npm与nrm</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_36958916/article/details/113653457">nrm详解</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/liuxin_hello/article/details/127801953">nrm - 源间切换</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/7cf6476b.html">https://fsllala.top/articles/7cf6476b.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs/">NodeJs</a><a class="post-meta__tags" href="/tags/nvm/">nvm</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/f7f97ed.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">文件下载</div></div></a></div><div class="next-post pull-right"><a href="/articles/4dee6fea.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">模块化规范</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/73805dbf.html" title="NodeJs起本地服务"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-11-21</div><div class="title">NodeJs起本地服务</div></div></a></div><div><a href="/articles/46635768.html" title="NodeJs连接MySQL"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-12-30</div><div class="title">NodeJs连接MySQL</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#nvm"><span class="toc-number">1.</span> <span class="toc-text">nvm</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#nvm%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">1.1.</span> <span class="toc-text">nvm是什么?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E7%94%A8nvm"><span class="toc-number">1.2.</span> <span class="toc-text">为什么需要用nvm?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#nvm%E7%9A%84%E5%AE%89%E8%A3%85"><span class="toc-number">1.3.</span> <span class="toc-text">nvm的安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#nvm%E5%91%BD%E4%BB%A4"><span class="toc-number">1.4.</span> <span class="toc-text">nvm命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85node"><span class="toc-number">1.5.</span> <span class="toc-text">安装node</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#npm"><span class="toc-number">2.</span> <span class="toc-text">npm</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9F%A5%E7%9C%8B%E7%89%88%E6%9C%AC"><span class="toc-number">2.1.</span> <span class="toc-text">查看版本</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#nrm"><span class="toc-number">3.</span> <span class="toc-text">nrm</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#nrm%E7%9A%84%E5%AE%89%E8%A3%85"><span class="toc-number">3.1.</span> <span class="toc-text">nrm的安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#nrm%E5%91%BD%E4%BB%A4"><span class="toc-number">3.2.</span> <span class="toc-text">nrm命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3nrm-ls%E5%91%BD%E4%BB%A4%E6%B2%A1%E6%9C%89-%EF%BC%88%E6%98%9F%E5%8F%B7%EF%BC%89%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">3.3.</span> <span class="toc-text">解决nrm ls命令没有*（星号）的问题</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%9B%B8%E5%85%B3%E9%93%BE%E6%8E%A5"><span class="toc-number">4.</span> <span class="toc-text">相关链接</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/7cf6476b.html">https://fsllala.top/articles/7cf6476b.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs/">NodeJs</a><a class="post-meta__tags" href="/tags/nvm/">nvm</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_12.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/f7f97ed.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">文件下载</div></div></a></div><div class="next-post pull-right"><a href="/articles/4dee6fea.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_8.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">模块化规范</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/73805dbf.html" title="NodeJs起本地服务"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_11.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-11-21</div><div class="title">NodeJs起本地服务</div></div></a></div><div><a href="/articles/46635768.html" title="NodeJs连接MySQL"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-12-30</div><div class="title">NodeJs连接MySQL</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#nvm"><span class="toc-number">1.</span> <span class="toc-text">nvm</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#nvm%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">1.1.</span> <span class="toc-text">nvm是什么?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E7%94%A8nvm"><span class="toc-number">1.2.</span> <span class="toc-text">为什么需要用nvm?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#nvm%E7%9A%84%E5%AE%89%E8%A3%85"><span class="toc-number">1.3.</span> <span class="toc-text">nvm的安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#nvm%E5%91%BD%E4%BB%A4"><span class="toc-number">1.4.</span> <span class="toc-text">nvm命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85node"><span class="toc-number">1.5.</span> <span class="toc-text">安装node</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#npm"><span class="toc-number">2.</span> <span class="toc-text">npm</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9F%A5%E7%9C%8B%E7%89%88%E6%9C%AC"><span class="toc-number">2.1.</span> <span class="toc-text">查看版本</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#nrm"><span class="toc-number">3.</span> <span class="toc-text">nrm</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#nrm%E7%9A%84%E5%AE%89%E8%A3%85"><span class="toc-number">3.1.</span> <span class="toc-text">nrm的安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#nrm%E5%91%BD%E4%BB%A4"><span class="toc-number">3.2.</span> <span class="toc-text">nrm命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3nrm-ls%E5%91%BD%E4%BB%A4%E6%B2%A1%E6%9C%89-%EF%BC%88%E6%98%9F%E5%8F%B7%EF%BC%89%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">3.3.</span> <span class="toc-text">解决nrm ls命令没有*（星号）的问题</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%9B%B8%E5%85%B3%E9%93%BE%E6%8E%A5"><span class="toc-number">4.</span> <span class="toc-text">相关链接</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/7db1b1fe.html b/articles/7db1b1fe.html
index a6f95024..c6656713 100644
--- a/articles/7db1b1fe.html
+++ b/articles/7db1b1fe.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:36:01'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_18.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 watch</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:36:01.407Z" title="更新于 2024-02-26 19:36:01">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3-watch/">Vue3 watch</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>10分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 watch"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h1><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_18.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 watch</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3-watch/">Vue3 watch</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>10分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 watch"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h1><blockquote>
 <p>监听<strong>响应式</strong>数据的变化，才能够被watch所监听到；</p>
 </blockquote>
 <div class="tabs" id="vuewatch"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#vuewatch-1">vue2.x</button></li><li class="tab"><button type="button" data-href="#vuewatch-2">vue3.0</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="vuewatch-1"><h2 id="vue2中的watch函数"><a href="#vue2中的watch函数" class="headerlink" title="vue2中的watch函数"></a>vue2中的watch函数</h2><blockquote>
@@ -163,7 +163,7 @@ <h3 id="ref定义的多个响应式数据"><a href="#ref定义的多个响应式
 </blockquote>
 <figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; sum &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sum++&quot;</span>&gt;</span>点我加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;msg += &#x27;!&#x27;&quot;</span>&gt;</span>点我加!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; ref, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 响应式数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> sum = <span class="title function_">ref</span>(<span class="number">1</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> msg = <span class="title function_">ref</span>(<span class="string">&quot;hello&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">watch</span>([sum,msg], <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      sum,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      msg,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656843723917watch.png" alt="watch"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656843723917watch.png" alt="watch"></p>
 <h3 id="ref定义的对象"><a href="#ref定义的对象" class="headerlink" title="ref定义的对象"></a>ref定义的对象</h3><blockquote>
 <p>watch监听ref定义的引用数据类型时,需要开启深度监听；reactive不需要开启,因为reactive源码中默认开启了深度监听；</p>
 <p>watch监听的如果是引用数据类型，那么newVal和oldVal的值是一样的；</p>
@@ -175,7 +175,7 @@ <h3 id="监听reactive定义的一个响应式数据的全部属性"><a href="#
 </blockquote>
 <figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; person.age &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;person.age++&quot;</span>&gt;</span>点我加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; person.name &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;person.name += &#x27;!&#x27;&quot;</span>&gt;</span>点我加!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; reactive, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">watch</span>(person, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      person,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656843942917watch1.png" alt="watch"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656843942917watch1.png" alt="watch"></p>
 <blockquote>
 <p>上面问题，目前还无法解决。。。</p>
 <p>但是其实可以将需要用到 oldValue 的 数据写成 ref的，即可解决；</p>
@@ -240,7 +240,7 @@ <h3 id="更多的配置项"><a href="#更多的配置项" class="headerlink" tit
 <td align="left">组件<strong>更新后</strong>执行</td>
 </tr>
 </tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/7db1b1fe.html">https://fsllala.top/articles/7db1b1fe.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3-watch/">Vue3 watch</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_18.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/1c4c16aa.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_21.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3 hook</div></div></a></div><div class="next-post pull-right"><a href="/articles/6d48bcfd.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_22.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3 provide与inject</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#watch"><span class="toc-number">1.</span> <span class="toc-text">watch</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#vue2%E4%B8%AD%E7%9A%84watch%E5%87%BD%E6%95%B0"><span class="toc-number">1.1.</span> <span class="toc-text">vue2中的watch函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E5%86%99%E6%B3%95"><span class="toc-number">1.1.1.</span> <span class="toc-text">基本写法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%9B%E9%98%B6%E5%86%99%E6%B3%95"><span class="toc-number">1.1.2.</span> <span class="toc-text">进阶写法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue3%E4%B8%AD%E7%9A%84watch%E5%87%BD%E6%95%B0"><span class="toc-number">1.2.</span> <span class="toc-text">vue3中的watch函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#ref%E5%AE%9A%E4%B9%89%E7%9A%84%E4%B8%80%E4%B8%AA%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE"><span class="toc-number">1.2.1.</span> <span class="toc-text">ref定义的一个响应式数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ref%E5%AE%9A%E4%B9%89%E7%9A%84%E5%A4%9A%E4%B8%AA%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE"><span class="toc-number">1.2.2.</span> <span class="toc-text">ref定义的多个响应式数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ref%E5%AE%9A%E4%B9%89%E7%9A%84%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.2.3.</span> <span class="toc-text">ref定义的对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%91%E5%90%ACreactive%E5%AE%9A%E4%B9%89%E7%9A%84%E4%B8%80%E4%B8%AA%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE%E7%9A%84%E5%85%A8%E9%83%A8%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.4.</span> <span class="toc-text">监听reactive定义的一个响应式数据的全部属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%91%E5%90%ACreactive%E5%AE%9A%E4%B9%89%E7%9A%84%E4%B8%80%E4%B8%AA%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE%E4%B8%AD%E7%9A%84%E5%8D%95%E4%B8%80%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.5.</span> <span class="toc-text">监听reactive定义的一个响应式数据中的单一属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%91%E5%90%ACreactive%E5%AE%9A%E4%B9%89%E7%9A%84%E4%B8%80%E4%B8%AA%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE%E4%B8%AD%E7%9A%84%E6%9F%90%E4%BA%9B%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.6.</span> <span class="toc-text">监听reactive定义的一个响应式数据中的某些属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%89%B9%E6%AE%8A%E6%83%85%E5%86%B5"><span class="toc-number">1.2.7.</span> <span class="toc-text">特殊情况</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue3%E4%B8%AD%E7%9A%84watchEffect%E5%87%BD%E6%95%B0"><span class="toc-number">1.3.</span> <span class="toc-text">vue3中的watchEffect函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E5%89%AF%E4%BD%9C%E7%94%A8"><span class="toc-number">1.3.1.</span> <span class="toc-text">清除副作用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%81%9C%E6%AD%A2%E7%9B%91%E5%90%AC"><span class="toc-number">1.3.2.</span> <span class="toc-text">停止监听</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9B%B4%E5%A4%9A%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9"><span class="toc-number">1.3.3.</span> <span class="toc-text">更多的配置项</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/7db1b1fe.html">https://fsllala.top/articles/7db1b1fe.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3-watch/">Vue3 watch</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_18.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/1c4c16aa.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_21.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3 hook</div></div></a></div><div class="next-post pull-right"><a href="/articles/6d48bcfd.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_22.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3 provide与inject</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#watch"><span class="toc-number">1.</span> <span class="toc-text">watch</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#vue2%E4%B8%AD%E7%9A%84watch%E5%87%BD%E6%95%B0"><span class="toc-number">1.1.</span> <span class="toc-text">vue2中的watch函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E5%86%99%E6%B3%95"><span class="toc-number">1.1.1.</span> <span class="toc-text">基本写法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%9B%E9%98%B6%E5%86%99%E6%B3%95"><span class="toc-number">1.1.2.</span> <span class="toc-text">进阶写法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue3%E4%B8%AD%E7%9A%84watch%E5%87%BD%E6%95%B0"><span class="toc-number">1.2.</span> <span class="toc-text">vue3中的watch函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#ref%E5%AE%9A%E4%B9%89%E7%9A%84%E4%B8%80%E4%B8%AA%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE"><span class="toc-number">1.2.1.</span> <span class="toc-text">ref定义的一个响应式数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ref%E5%AE%9A%E4%B9%89%E7%9A%84%E5%A4%9A%E4%B8%AA%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE"><span class="toc-number">1.2.2.</span> <span class="toc-text">ref定义的多个响应式数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ref%E5%AE%9A%E4%B9%89%E7%9A%84%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.2.3.</span> <span class="toc-text">ref定义的对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%91%E5%90%ACreactive%E5%AE%9A%E4%B9%89%E7%9A%84%E4%B8%80%E4%B8%AA%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE%E7%9A%84%E5%85%A8%E9%83%A8%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.4.</span> <span class="toc-text">监听reactive定义的一个响应式数据的全部属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%91%E5%90%ACreactive%E5%AE%9A%E4%B9%89%E7%9A%84%E4%B8%80%E4%B8%AA%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE%E4%B8%AD%E7%9A%84%E5%8D%95%E4%B8%80%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.5.</span> <span class="toc-text">监听reactive定义的一个响应式数据中的单一属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%91%E5%90%ACreactive%E5%AE%9A%E4%B9%89%E7%9A%84%E4%B8%80%E4%B8%AA%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE%E4%B8%AD%E7%9A%84%E6%9F%90%E4%BA%9B%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.6.</span> <span class="toc-text">监听reactive定义的一个响应式数据中的某些属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%89%B9%E6%AE%8A%E6%83%85%E5%86%B5"><span class="toc-number">1.2.7.</span> <span class="toc-text">特殊情况</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue3%E4%B8%AD%E7%9A%84watchEffect%E5%87%BD%E6%95%B0"><span class="toc-number">1.3.</span> <span class="toc-text">vue3中的watchEffect函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E5%89%AF%E4%BD%9C%E7%94%A8"><span class="toc-number">1.3.1.</span> <span class="toc-text">清除副作用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%81%9C%E6%AD%A2%E7%9B%91%E5%90%AC"><span class="toc-number">1.3.2.</span> <span class="toc-text">停止监听</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9B%B4%E5%A4%9A%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9"><span class="toc-number">1.3.3.</span> <span class="toc-text">更多的配置项</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/8b67a7b3.html b/articles/8b67a7b3.html
index 947c80ef..a00861ad 100644
--- a/articles/8b67a7b3.html
+++ b/articles/8b67a7b3.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:34:03'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_5.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs1内置模块</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:34:03.716Z" title="更新于 2024-02-26 19:34:03">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/">内置模块</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">4.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>19分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs1内置模块"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="NodeJs内置模块"><a href="#NodeJs内置模块" class="headerlink" title="NodeJs内置模块"></a>NodeJs内置模块</h1><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_5.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs1内置模块</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.895Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/">内置模块</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">4.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>19分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs1内置模块"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="NodeJs内置模块"><a href="#NodeJs内置模块" class="headerlink" title="NodeJs内置模块"></a>NodeJs内置模块</h1><blockquote>
 <p>Tips：内置模块：下载NodeJs自带的模块，无需二次下载。</p>
 </blockquote>
 <h2 id="fs模块"><a href="#fs模块" class="headerlink" title="fs模块"></a>fs模块</h2><p>文件操作都是基于fs模块。</p>
@@ -366,7 +366,7 @@ <h4 id="path-resolve"><a href="#path-resolve" class="headerlink" title="path.res
 <figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 路径拼接 绝对路径 (/会直接当成绝对路径)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// /会直接当成绝对路径,拼接完一个完整的绝对路径,剩下的不再拼接;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(path.<span class="title function_">resolve</span>(<span class="string">&quot;./abc/cba&quot;</span>, <span class="string">&quot;./why/hua&quot;</span>, <span class="string">&quot;/ccc.txt&quot;</span>)); <span class="comment">// E:\ccc.txt</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 每个路径相对路径是相对于的前面的拼接路径,若最终没有拼成绝对路径,会再次和__dirname进行拼接;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(path.<span class="title function_">resolve</span>(<span class="string">&quot;./abc/cba&quot;</span>, <span class="string">&quot;../why/hua&quot;</span>, <span class="string">&quot;./ccc.txt&quot;</span>)); <span class="comment">//  E:\fsl\webpack\path模块\abc\why\hua\ccc.txt</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// ps</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(__dirname); <span class="comment">// E:\fsl\webpack\path模块</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// path.resolve()什么都不传,就是当前路径;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(path.<span class="title function_">resolve</span>()); <span class="comment">// E:\fsl\webpack\path模块</span></span><br></pre></td></tr></table></figure>
 
 <h2 id="http模块"><a href="#http模块" class="headerlink" title="http模块"></a>http模块</h2><p>http模块用来做web服务器，<a href="https://fsllala.top/articles/e4a31b2e">传送门</a>。</p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/8b67a7b3.html">https://fsllala.top/articles/8b67a7b3.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/">NodeJs内置模块</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_5.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/e8f85541.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">原型与原型链</div></div></a></div><div class="next-post pull-right"><a href="/articles/e4a31b2e.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_6.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs2服务器</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97"><span class="toc-number">1.</span> <span class="toc-text">NodeJs内置模块</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#fs%E6%A8%A1%E5%9D%97"><span class="toc-number">1.1.</span> <span class="toc-text">fs模块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E6%96%87%E4%BB%B6"><span class="toc-number">1.1.1.</span> <span class="toc-text">操作文件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%90%8C%E6%AD%A5%E8%AF%BB%E5%8F%96"><span class="toc-number">1.1.1.1.</span> <span class="toc-text">同步读取</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E8%AF%BB%E5%8F%96"><span class="toc-number">1.1.1.2.</span> <span class="toc-text">异步读取</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0"><span class="toc-number">1.1.1.2.1.</span> <span class="toc-text">回调函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#promise"><span class="toc-number">1.1.1.2.2.</span> <span class="toc-text">promise</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%90%8C%E6%AD%A5%E5%86%99%E5%85%A5"><span class="toc-number">1.1.1.3.</span> <span class="toc-text">同步写入</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E5%86%99%E5%85%A5"><span class="toc-number">1.1.1.4.</span> <span class="toc-text">异步写入</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E6%96%87%E4%BB%B6%E5%A4%B9"><span class="toc-number">1.1.2.</span> <span class="toc-text">操作文件夹</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9"><span class="toc-number">1.1.2.1.</span> <span class="toc-text">创建文件夹</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AF%BB%E5%8F%96%E6%96%87%E4%BB%B6%E5%A4%B9%E5%86%85%E5%AE%B9"><span class="toc-number">1.1.2.2.</span> <span class="toc-text">读取文件夹内容</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%99%AE%E9%80%9A%E8%AF%BB%E5%8F%96"><span class="toc-number">1.1.2.2.1.</span> <span class="toc-text">普通读取</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%AF%A6%E7%BB%86%E8%AF%BB%E5%8F%96"><span class="toc-number">1.1.2.2.2.</span> <span class="toc-text">详细读取</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E6%93%8D%E4%BD%9C"><span class="toc-number">1.1.2.3.</span> <span class="toc-text">其他操作</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#events%E6%A8%A1%E5%9D%97"><span class="toc-number">1.2.</span> <span class="toc-text">events模块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#stream%E6%A8%A1%E5%9D%97"><span class="toc-number">1.3.</span> <span class="toc-text">stream模块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Readable"><span class="toc-number">1.3.1.</span> <span class="toc-text">Readable</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Writable"><span class="toc-number">1.3.2.</span> <span class="toc-text">Writable</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#pipe"><span class="toc-number">1.3.3.</span> <span class="toc-text">pipe</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%A8%E5%B1%80"><span class="toc-number">1.4.</span> <span class="toc-text">全局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#url%E6%A8%A1%E5%9D%97"><span class="toc-number">1.5.</span> <span class="toc-text">url模块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#querystring%E6%A8%A1%E5%9D%97"><span class="toc-number">1.6.</span> <span class="toc-text">querystring模块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#path%E6%A8%A1%E5%9D%97"><span class="toc-number">1.7.</span> <span class="toc-text">path模块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#path-join-%E4%B8%8Epath-resolve-%E5%8C%BA%E5%88%AB"><span class="toc-number">1.7.1.</span> <span class="toc-text">path.join()与path.resolve()区别</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#path-join"><span class="toc-number">1.7.1.1.</span> <span class="toc-text">path.join()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#path-resolve"><span class="toc-number">1.7.1.2.</span> <span class="toc-text">path.resolve()</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#http%E6%A8%A1%E5%9D%97"><span class="toc-number">1.8.</span> <span class="toc-text">http模块</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/8b67a7b3.html">https://fsllala.top/articles/8b67a7b3.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/">NodeJs内置模块</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_5.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/e8f85541.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_36.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">原型与原型链</div></div></a></div><div class="next-post pull-right"><a href="/articles/e4a31b2e.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_6.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs2服务器</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97"><span class="toc-number">1.</span> <span class="toc-text">NodeJs内置模块</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#fs%E6%A8%A1%E5%9D%97"><span class="toc-number">1.1.</span> <span class="toc-text">fs模块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E6%96%87%E4%BB%B6"><span class="toc-number">1.1.1.</span> <span class="toc-text">操作文件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%90%8C%E6%AD%A5%E8%AF%BB%E5%8F%96"><span class="toc-number">1.1.1.1.</span> <span class="toc-text">同步读取</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E8%AF%BB%E5%8F%96"><span class="toc-number">1.1.1.2.</span> <span class="toc-text">异步读取</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0"><span class="toc-number">1.1.1.2.1.</span> <span class="toc-text">回调函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#promise"><span class="toc-number">1.1.1.2.2.</span> <span class="toc-text">promise</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%90%8C%E6%AD%A5%E5%86%99%E5%85%A5"><span class="toc-number">1.1.1.3.</span> <span class="toc-text">同步写入</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E5%86%99%E5%85%A5"><span class="toc-number">1.1.1.4.</span> <span class="toc-text">异步写入</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E6%96%87%E4%BB%B6%E5%A4%B9"><span class="toc-number">1.1.2.</span> <span class="toc-text">操作文件夹</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9"><span class="toc-number">1.1.2.1.</span> <span class="toc-text">创建文件夹</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AF%BB%E5%8F%96%E6%96%87%E4%BB%B6%E5%A4%B9%E5%86%85%E5%AE%B9"><span class="toc-number">1.1.2.2.</span> <span class="toc-text">读取文件夹内容</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%99%AE%E9%80%9A%E8%AF%BB%E5%8F%96"><span class="toc-number">1.1.2.2.1.</span> <span class="toc-text">普通读取</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%AF%A6%E7%BB%86%E8%AF%BB%E5%8F%96"><span class="toc-number">1.1.2.2.2.</span> <span class="toc-text">详细读取</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E6%93%8D%E4%BD%9C"><span class="toc-number">1.1.2.3.</span> <span class="toc-text">其他操作</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#events%E6%A8%A1%E5%9D%97"><span class="toc-number">1.2.</span> <span class="toc-text">events模块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#stream%E6%A8%A1%E5%9D%97"><span class="toc-number">1.3.</span> <span class="toc-text">stream模块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Readable"><span class="toc-number">1.3.1.</span> <span class="toc-text">Readable</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Writable"><span class="toc-number">1.3.2.</span> <span class="toc-text">Writable</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#pipe"><span class="toc-number">1.3.3.</span> <span class="toc-text">pipe</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%A8%E5%B1%80"><span class="toc-number">1.4.</span> <span class="toc-text">全局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#url%E6%A8%A1%E5%9D%97"><span class="toc-number">1.5.</span> <span class="toc-text">url模块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#querystring%E6%A8%A1%E5%9D%97"><span class="toc-number">1.6.</span> <span class="toc-text">querystring模块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#path%E6%A8%A1%E5%9D%97"><span class="toc-number">1.7.</span> <span class="toc-text">path模块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#path-join-%E4%B8%8Epath-resolve-%E5%8C%BA%E5%88%AB"><span class="toc-number">1.7.1.</span> <span class="toc-text">path.join()与path.resolve()区别</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#path-join"><span class="toc-number">1.7.1.1.</span> <span class="toc-text">path.join()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#path-resolve"><span class="toc-number">1.7.1.2.</span> <span class="toc-text">path.resolve()</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#http%E6%A8%A1%E5%9D%97"><span class="toc-number">1.8.</span> <span class="toc-text">http模块</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/8ba9ed2d.html b/articles/8ba9ed2d.html
index 5dd5bfe4..8dd19921 100644
--- a/articles/8ba9ed2d.html
+++ b/articles/8ba9ed2d.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:34:31'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs Express</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:34:31.879Z" title="更新于 2024-02-26 19:34:31">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/Express/">Express</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">4.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>20分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs Express"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Express"><a href="#Express" class="headerlink" title="Express"></a>Express</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_32.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs Express</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.895Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/Express/">Express</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">4.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>20分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs Express"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Express"><a href="#Express" class="headerlink" title="Express"></a>Express</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><ul>
 <li>Express 是一个简洁而灵活的 Node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用</li>
 <li>Express内部还是使用的http模块实现服务器创建和监听, 对http模块进行了二次封装</li>
 <li>严格上来说  express就是NodeJS的一个模块  直接下载安装</li>
@@ -226,7 +226,7 @@ <h3 id="中间件应用-form-data解析"><a href="#中间件应用-form-data解
 <p>form-data解析：一般用于上传图片文件；</p>
 <p>express框架没有内置的解析中间件，但是有官方的库<code>multer</code>，需要下载安装一下：<code>npm i multer</code></p>
 </blockquote>
-<h4 id="初步使用"><a href="#初步使用" class="headerlink" title="初步使用"></a>初步使用</h4><p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1671354368858formdata1.png" alt="multer初使用"></p>
+<h4 id="初步使用"><a href="#初步使用" class="headerlink" title="初步使用"></a>初步使用</h4><p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1671354368858formdata1.png" alt="multer初使用"></p>
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//不推荐此写法</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"><span class="comment">// 引入multer,是个函数</span></span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;multer&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用multer函数</span></span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 表示 form-data中普通的数据</span></span><br><span class="line">app.<span class="title function_">use</span>(upload.<span class="title function_">any</span>());</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/upload&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">body</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;用户上传成功&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
 
 <blockquote>
@@ -321,7 +321,7 @@ <h2 id="服务端错误处理"><a href="#服务端错误处理" class="headerlin
 
 <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a target="_blank" rel="noopener" href="https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md">multer官方文档</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_64841572/article/details/126254419?spm=1001.2014.3001.5506">Node中间件multer库学习</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/8ba9ed2d.html">https://fsllala.top/articles/8ba9ed2d.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs-Express/">NodeJs Express</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/4dee6fea.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">模块化规范</div></div></a></div><div class="next-post pull-right"><a href="/articles/799084bf.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs Koa2</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/d95e4f83.html" title="NodeJs3 Express"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-03-05</div><div class="title">NodeJs3 Express</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Express"><span class="toc-number">1.</span> <span class="toc-text">Express</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E4%BB%8B"><span class="toc-number">1.1.</span> <span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%AD%E6%96%87%E5%AE%98%E7%BD%91"><span class="toc-number">1.2.</span> <span class="toc-text">中文官网</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8"><span class="toc-number">1.3.</span> <span class="toc-text">使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#express%E5%88%9D%E4%BD%93%E9%AA%8C"><span class="toc-number">1.4.</span> <span class="toc-text">express初体验</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#express%E4%B8%AD%E9%97%B4%E4%BB%B6"><span class="toc-number">1.5.</span> <span class="toc-text">express中间件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5"><span class="toc-number">1.5.1.</span> <span class="toc-text">中间件基本概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#app-use%E5%88%9B%E5%BB%BA%E6%9C%80%E6%99%AE%E9%80%9A%E4%B8%AD%E9%97%B4%E4%BB%B6-%E5%AF%B9method%E5%92%8C%E8%B7%AF%E7%94%B1%E5%9D%87%E6%B2%A1%E6%9C%89%E9%99%90%E5%88%B6"><span class="toc-number">1.5.2.</span> <span class="toc-text">app.use创建最普通中间件(对method和路由均没有限制)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#app-use%E5%88%9B%E5%BB%BA%E5%A4%9A%E4%B8%AA%E6%9C%80%E6%99%AE%E9%80%9A%E4%B8%AD%E9%97%B4%E4%BB%B6"><span class="toc-number">1.5.3.</span> <span class="toc-text">app.use创建多个最普通中间件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E4%B8%AD%E9%97%B4%E4%BB%B6"><span class="toc-number">1.5.4.</span> <span class="toc-text">路由中间件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E5%92%8C%E6%96%B9%E6%B3%95%E9%83%BD%E5%8C%B9%E9%85%8D%E7%9A%84%E4%B8%AD%E9%97%B4%E4%BB%B6"><span class="toc-number">1.5.5.</span> <span class="toc-text">路由和方法都匹配的中间件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%9E%E7%BB%AD%E6%B3%A8%E5%86%8C%E4%B8%AD%E9%97%B4%E4%BB%B6-koa%E4%B8%8D%E6%94%AF%E6%8C%81"><span class="toc-number">1.5.6.</span> <span class="toc-text">连续注册中间件(koa不支持)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#POST%E8%AF%B7%E6%B1%82body%E5%8F%82%E6%95%B0%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.</span> <span class="toc-text">POST请求body参数解析</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%BA%94%E7%94%A8-json-urlencoded%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.1.</span> <span class="toc-text">中间件应用-json-urlencoded解析</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%BA%94%E7%94%A8-form-data%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.2.</span> <span class="toc-text">中间件应用-form-data解析</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%9D%E6%AD%A5%E4%BD%BF%E7%94%A8"><span class="toc-number">1.6.2.1.</span> <span class="toc-text">初步使用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0"><span class="toc-number">1.6.2.2.</span> <span class="toc-text">文件上传</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#GET%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0%E8%A7%A3%E6%9E%90"><span class="toc-number">1.7.</span> <span class="toc-text">GET请求参数解析</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#params%E8%A7%A3%E6%9E%90-%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0"><span class="toc-number">1.7.1.</span> <span class="toc-text">params解析(路由参数)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#query%E8%A7%A3%E6%9E%90"><span class="toc-number">1.7.2.</span> <span class="toc-text">query解析</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E6%95%B0%E6%8D%AE"><span class="toc-number">1.8.</span> <span class="toc-text">响应数据</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#express%E8%B7%AF%E7%94%B1"><span class="toc-number">1.9.</span> <span class="toc-text">express路由</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%8D%E5%8A%A1%E7%AB%AF%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86"><span class="toc-number">1.10.</span> <span class="toc-text">服务端错误处理</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">2.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/8ba9ed2d.html">https://fsllala.top/articles/8ba9ed2d.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs-Express/">NodeJs Express</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_32.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/4dee6fea.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_8.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">模块化规范</div></div></a></div><div class="next-post pull-right"><a href="/articles/799084bf.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_9.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs Koa2</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/d95e4f83.html" title="NodeJs3 Express"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_7.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-03-05</div><div class="title">NodeJs3 Express</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Express"><span class="toc-number">1.</span> <span class="toc-text">Express</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E4%BB%8B"><span class="toc-number">1.1.</span> <span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%AD%E6%96%87%E5%AE%98%E7%BD%91"><span class="toc-number">1.2.</span> <span class="toc-text">中文官网</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8"><span class="toc-number">1.3.</span> <span class="toc-text">使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#express%E5%88%9D%E4%BD%93%E9%AA%8C"><span class="toc-number">1.4.</span> <span class="toc-text">express初体验</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#express%E4%B8%AD%E9%97%B4%E4%BB%B6"><span class="toc-number">1.5.</span> <span class="toc-text">express中间件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5"><span class="toc-number">1.5.1.</span> <span class="toc-text">中间件基本概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#app-use%E5%88%9B%E5%BB%BA%E6%9C%80%E6%99%AE%E9%80%9A%E4%B8%AD%E9%97%B4%E4%BB%B6-%E5%AF%B9method%E5%92%8C%E8%B7%AF%E7%94%B1%E5%9D%87%E6%B2%A1%E6%9C%89%E9%99%90%E5%88%B6"><span class="toc-number">1.5.2.</span> <span class="toc-text">app.use创建最普通中间件(对method和路由均没有限制)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#app-use%E5%88%9B%E5%BB%BA%E5%A4%9A%E4%B8%AA%E6%9C%80%E6%99%AE%E9%80%9A%E4%B8%AD%E9%97%B4%E4%BB%B6"><span class="toc-number">1.5.3.</span> <span class="toc-text">app.use创建多个最普通中间件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E4%B8%AD%E9%97%B4%E4%BB%B6"><span class="toc-number">1.5.4.</span> <span class="toc-text">路由中间件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E5%92%8C%E6%96%B9%E6%B3%95%E9%83%BD%E5%8C%B9%E9%85%8D%E7%9A%84%E4%B8%AD%E9%97%B4%E4%BB%B6"><span class="toc-number">1.5.5.</span> <span class="toc-text">路由和方法都匹配的中间件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%9E%E7%BB%AD%E6%B3%A8%E5%86%8C%E4%B8%AD%E9%97%B4%E4%BB%B6-koa%E4%B8%8D%E6%94%AF%E6%8C%81"><span class="toc-number">1.5.6.</span> <span class="toc-text">连续注册中间件(koa不支持)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#POST%E8%AF%B7%E6%B1%82body%E5%8F%82%E6%95%B0%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.</span> <span class="toc-text">POST请求body参数解析</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%BA%94%E7%94%A8-json-urlencoded%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.1.</span> <span class="toc-text">中间件应用-json-urlencoded解析</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%BA%94%E7%94%A8-form-data%E8%A7%A3%E6%9E%90"><span class="toc-number">1.6.2.</span> <span class="toc-text">中间件应用-form-data解析</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%9D%E6%AD%A5%E4%BD%BF%E7%94%A8"><span class="toc-number">1.6.2.1.</span> <span class="toc-text">初步使用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0"><span class="toc-number">1.6.2.2.</span> <span class="toc-text">文件上传</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#GET%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0%E8%A7%A3%E6%9E%90"><span class="toc-number">1.7.</span> <span class="toc-text">GET请求参数解析</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#params%E8%A7%A3%E6%9E%90-%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0"><span class="toc-number">1.7.1.</span> <span class="toc-text">params解析(路由参数)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#query%E8%A7%A3%E6%9E%90"><span class="toc-number">1.7.2.</span> <span class="toc-text">query解析</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E6%95%B0%E6%8D%AE"><span class="toc-number">1.8.</span> <span class="toc-text">响应数据</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#express%E8%B7%AF%E7%94%B1"><span class="toc-number">1.9.</span> <span class="toc-text">express路由</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%8D%E5%8A%A1%E7%AB%AF%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86"><span class="toc-number">1.10.</span> <span class="toc-text">服务端错误处理</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">2.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/957893b.html b/articles/957893b.html
index 09a3d138..3019acac 100644
--- a/articles/957893b.html
+++ b/articles/957893b.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:39:56'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">异步处理</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:39:56.706Z" title="更新于 2024-02-26 19:39:56">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E5%BC%82%E6%AD%A5%E5%A4%84%E7%90%86/">异步处理</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.9k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="异步处理"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="回调函数"><a href="#回调函数" class="headerlink" title="回调函数"></a>回调函数</h1><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_34.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">异步处理</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E5%BC%82%E6%AD%A5%E5%A4%84%E7%90%86/">异步处理</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.9k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="异步处理"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="回调函数"><a href="#回调函数" class="headerlink" title="回调函数"></a>回调函数</h1><ul>
 <li><p>概念：一个函数作为另一个函数的参数；先执行一个函数，把他的执行结果作为另一个函数的参数；</p>
 </li>
 <li><p>弊端：会产生回调地狱。(回调函数的层层嵌套 例如：京东首页的tab栏，家用电器里面有电视，电视里面有各种牌子，不同牌子又有不同的配色等等，类似这样下一级的参数为上一级的返回值的)</p>
@@ -286,7 +286,7 @@ <h1 id="async"><a href="#async" class="headerlink" title="async"></a>async</h1><
 <li>await的返回值就是Promise的resolve&#x2F;reject返回结果，然后通过async函数return出来，相当于Promise.resolve(“返回结果”)；</li>
 </ul>
 <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a target="_blank" rel="noopener" href="https://blog.csdn.net/MRlaochen/article/details/118799759?spm=1001.2014.3001.5502">异步回调中Async Await和Promise区别</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/957893b.html">https://fsllala.top/articles/957893b.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/promise/">promise</a><a class="post-meta__tags" href="/tags/async-await/">async await</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/ee7734c7.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_27.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">开机自启</div></div></a></div><div class="next-post pull-right"><a href="/articles/42ce80b9.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">websocket</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0"><span class="toc-number">1.</span> <span class="toc-text">回调函数</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Promise"><span class="toc-number">2.</span> <span class="toc-text">Promise</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#async"><span class="toc-number">3.</span> <span class="toc-text">async</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">4.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/957893b.html">https://fsllala.top/articles/957893b.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/promise/">promise</a><a class="post-meta__tags" href="/tags/async-await/">async await</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_34.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/ee7734c7.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_27.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">开机自启</div></div></a></div><div class="next-post pull-right"><a href="/articles/42ce80b9.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_26.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">websocket</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0"><span class="toc-number">1.</span> <span class="toc-text">回调函数</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Promise"><span class="toc-number">2.</span> <span class="toc-text">Promise</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#async"><span class="toc-number">3.</span> <span class="toc-text">async</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">4.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/b9f20a20.html b/articles/b9f20a20.html
index fc105a9d..06903972 100644
--- a/articles/b9f20a20.html
+++ b/articles/b9f20a20.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:37:11'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">webpack</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:37:11.586Z" title="更新于 2024-02-26 19:37:11">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/webpack/">webpack</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">4.5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>16分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="webpack"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="什么是Webpack"><a href="#什么是Webpack" class="headerlink" title="什么是Webpack"></a>什么是Webpack</h1><ol>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_64.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">webpack</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/webpack/">webpack</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">4.5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>16分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="webpack"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="什么是Webpack"><a href="#什么是Webpack" class="headerlink" title="什么是Webpack"></a>什么是Webpack</h1><ol>
 <li><p><a target="_blank" rel="noopener" href="https://webpack.js.org/">官网</a></p>
 </li>
 <li><p>官方解释：<code>webpack is a static module bundler for modern JavaScript applications.</code></p>
@@ -210,7 +210,7 @@ <h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置
 </ul>
 <figure class="highlight js"><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"><span class="comment">// package.json</span></span><br><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;build&quot;</span>:<span class="string">&quot;webpack --config vue.config.js&quot;</span>  <span class="comment">// 这里不是cmd,所以去掉npx</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
-<h1 id="进阶打包"><a href="#进阶打包" class="headerlink" title="进阶打包"></a>进阶打包</h1><h2 id="Webpack依赖图"><a href="#Webpack依赖图" class="headerlink" title="Webpack依赖图"></a><a id="webpackYLT">Webpack依赖图</a></h2><p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/webpack.png" alt="webpack"></p>
+<h1 id="进阶打包"><a href="#进阶打包" class="headerlink" title="进阶打包"></a>进阶打包</h1><h2 id="Webpack依赖图"><a href="#Webpack依赖图" class="headerlink" title="Webpack依赖图"></a><a id="webpackYLT">Webpack依赖图</a></h2><p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/webpack.png" alt="webpack"></p>
 <p>webpack到底是如何对我们的项目进行打包的呢？</p>
 <ul>
 <li>事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；</li>
@@ -250,7 +250,7 @@ <h3 id="验证loader作用"><a href="#验证loader作用" class="headerlink" tit
 <figure class="highlight plaintext"><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"># package.json </span><br><span class="line"> &quot;scripts&quot;: &#123;</span><br><span class="line">    &quot;build&quot;:&quot;webpack&quot;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
 
 <p>打包出错，打包结果如下图所示：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/css-loader1.png" alt="css-loader1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/css-loader1.png" alt="css-loader1"></p>
 <p>上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？</p>
 <ul>
 <li>loader 可以用于对模块的源代码进行转换；</li>
@@ -331,7 +331,7 @@ <h4 id="autoprefixer"><a href="#autoprefixer" class="headerlink" title="autopref
 <li><code>npm run build</code>进行打包，index.html引入打包之后的文件，检查css</li>
 <li>效果如下</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/Autoprefixer.png" alt="Autoprefixer"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/Autoprefixer.png" alt="Autoprefixer"></p>
 <h4 id="postcss-preset-env"><a href="#postcss-preset-env" class="headerlink" title="postcss-preset-env"></a>postcss-preset-env</h4><ul>
 <li>集成了postcss常用的插件(Autoprefixer，polyfill……)；</li>
 <li>所以用postcss-preset-env，就不需要安装使用Autoprefixer了，因为内部已经集成了Autoprefixer；</li>
@@ -379,7 +379,7 @@ <h4 id="asset-module-type的使用"><a href="#asset-module-type的使用" class=
 <li>通过<code>npm run build</code>进行打包；观察打包之后的dist文件夹；**(每次打包前需要删除之前的dist文件夹，防止之前的分包依旧保留，后续可以通过配置实现自动删除)**</li>
 </ul>
 <p>发现将原来的ikun.jpg，打包成了1d40d06e317136088c5a.jpg；然后main.js对打包之后的图片地址做了处理；</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/assetResource.png" alt="assetResource"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/assetResource.png" alt="assetResource"></p>
 <ul>
 <li>浏览器运行，可看到图片正常显示，图片地址为在线地址：<a target="_blank" rel="noopener" href="http://127.0.0.1:5500/dist/1d40d06e317136088c5a.jpg">http://127.0.0.1:5500/dist/1d40d06e317136088c5a.jpg</a></li>
 </ul>
@@ -417,7 +417,7 @@ <h4 id="asset-module-type的使用"><a href="#asset-module-type的使用" class=
 <li>通过<code>npm run build</code>进行打包；观察打包之后的dist文件夹；**(每次打包前需要删除之前的dist文件夹，防止之前的分包依旧保留，后续可以通过配置实现自动删除)**</li>
 </ul>
 <p>发现dist文件夹里面只有一个main.js；</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/assetInline.png" alt="assetInline"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/assetInline.png" alt="assetInline"></p>
 <ul>
 <li>浏览器运行，可看到图片正常显示，图片地址为base64：data:image&#x2F;jpeg;base64,&#x2F;9j&#x2F;4AAQSkZJRgABAQAAAQABAAD…P2atuIjKPvHtU5hxbHHVqzLS6xGJv4G6CtISEIPRulecZn&#x2F;&#x2F;Z</li>
 </ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="assetmoduletype-3"><blockquote>
@@ -491,7 +491,7 @@ <h3 id="CleanWebpackPlugin"><a href="#CleanWebpackPlugin" class="headerlink" tit
 <li>测试</li>
 </ul>
 <p>在之前打包的dist文件夹中，随便新建个文件，比如abc.js&#x3D;&#x3D;&gt;打包之后被清除；</p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/b9f20a20.html">https://fsllala.top/articles/b9f20a20.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/webpack/">webpack</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-full"><a href="/articles/fa0f2f9c.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">网络安全修改</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFWebpack"><span class="toc-number">1.</span> <span class="toc-text">什么是Webpack</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%8E%AF%E5%A2%83"><span class="toc-number">2.</span> <span class="toc-text">环境</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%89%E8%A3%85"><span class="toc-number">3.</span> <span class="toc-text">安装</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E6%89%93%E5%8C%85"><span class="toc-number">4.</span> <span class="toc-text">基础打包</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%BB%98%E8%AE%A4%E6%89%93%E5%8C%85"><span class="toc-number">4.1.</span> <span class="toc-text">默认打包</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0"><span class="toc-number">4.2.</span> <span class="toc-text">配置参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">4.3.</span> <span class="toc-text">配置文件</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%BF%9B%E9%98%B6%E6%89%93%E5%8C%85"><span class="toc-number">5.</span> <span class="toc-text">进阶打包</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Webpack%E4%BE%9D%E8%B5%96%E5%9B%BE"><span class="toc-number">5.1.</span> <span class="toc-text">Webpack依赖图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#loader"><span class="toc-number">5.2.</span> <span class="toc-text">loader</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%AA%8C%E8%AF%81loader%E4%BD%9C%E7%94%A8"><span class="toc-number">5.2.1.</span> <span class="toc-text">验证loader作用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#css-loader%E4%B8%8Estyle-loader"><span class="toc-number">5.2.2.</span> <span class="toc-text">css-loader与style-loader</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#loader%E9%85%8D%E7%BD%AE"><span class="toc-number">5.2.3.</span> <span class="toc-text">loader配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#less-loader"><span class="toc-number">5.2.4.</span> <span class="toc-text">less-loader</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#PostCSS"><span class="toc-number">5.2.5.</span> <span class="toc-text">PostCSS</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#autoprefixer"><span class="toc-number">5.2.5.1.</span> <span class="toc-text">autoprefixer</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#postcss-preset-env"><span class="toc-number">5.2.5.2.</span> <span class="toc-text">postcss-preset-env</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Webpack%E6%89%93%E5%8C%85%E5%9B%BE%E7%89%87"><span class="toc-number">5.2.6.</span> <span class="toc-text">Webpack打包图片</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#asset-module-type"><span class="toc-number">5.2.6.1.</span> <span class="toc-text">asset module type</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#asset-module-type%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">5.2.6.2.</span> <span class="toc-text">asset module type的使用</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Babel"><span class="toc-number">5.2.7.</span> <span class="toc-text">Babel</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8F%92%E4%BB%B6"><span class="toc-number">5.2.7.1.</span> <span class="toc-text">插件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Babel%E7%9A%84%E9%A2%84%E8%AE%BEpreset"><span class="toc-number">5.2.7.2.</span> <span class="toc-text">Babel的预设preset</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Plugin"><span class="toc-number">5.3.</span> <span class="toc-text">Plugin</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#CleanWebpackPlugin"><span class="toc-number">5.3.1.</span> <span class="toc-text">CleanWebpackPlugin</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/b9f20a20.html">https://fsllala.top/articles/b9f20a20.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/webpack/">webpack</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_64.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-full"><a href="/articles/fa0f2f9c.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">网络安全修改</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFWebpack"><span class="toc-number">1.</span> <span class="toc-text">什么是Webpack</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%8E%AF%E5%A2%83"><span class="toc-number">2.</span> <span class="toc-text">环境</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%89%E8%A3%85"><span class="toc-number">3.</span> <span class="toc-text">安装</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E6%89%93%E5%8C%85"><span class="toc-number">4.</span> <span class="toc-text">基础打包</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%BB%98%E8%AE%A4%E6%89%93%E5%8C%85"><span class="toc-number">4.1.</span> <span class="toc-text">默认打包</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0"><span class="toc-number">4.2.</span> <span class="toc-text">配置参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">4.3.</span> <span class="toc-text">配置文件</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%BF%9B%E9%98%B6%E6%89%93%E5%8C%85"><span class="toc-number">5.</span> <span class="toc-text">进阶打包</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Webpack%E4%BE%9D%E8%B5%96%E5%9B%BE"><span class="toc-number">5.1.</span> <span class="toc-text">Webpack依赖图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#loader"><span class="toc-number">5.2.</span> <span class="toc-text">loader</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%AA%8C%E8%AF%81loader%E4%BD%9C%E7%94%A8"><span class="toc-number">5.2.1.</span> <span class="toc-text">验证loader作用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#css-loader%E4%B8%8Estyle-loader"><span class="toc-number">5.2.2.</span> <span class="toc-text">css-loader与style-loader</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#loader%E9%85%8D%E7%BD%AE"><span class="toc-number">5.2.3.</span> <span class="toc-text">loader配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#less-loader"><span class="toc-number">5.2.4.</span> <span class="toc-text">less-loader</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#PostCSS"><span class="toc-number">5.2.5.</span> <span class="toc-text">PostCSS</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#autoprefixer"><span class="toc-number">5.2.5.1.</span> <span class="toc-text">autoprefixer</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#postcss-preset-env"><span class="toc-number">5.2.5.2.</span> <span class="toc-text">postcss-preset-env</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Webpack%E6%89%93%E5%8C%85%E5%9B%BE%E7%89%87"><span class="toc-number">5.2.6.</span> <span class="toc-text">Webpack打包图片</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#asset-module-type"><span class="toc-number">5.2.6.1.</span> <span class="toc-text">asset module type</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#asset-module-type%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">5.2.6.2.</span> <span class="toc-text">asset module type的使用</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Babel"><span class="toc-number">5.2.7.</span> <span class="toc-text">Babel</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8F%92%E4%BB%B6"><span class="toc-number">5.2.7.1.</span> <span class="toc-text">插件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Babel%E7%9A%84%E9%A2%84%E8%AE%BEpreset"><span class="toc-number">5.2.7.2.</span> <span class="toc-text">Babel的预设preset</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Plugin"><span class="toc-number">5.3.</span> <span class="toc-text">Plugin</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#CleanWebpackPlugin"><span class="toc-number">5.3.1.</span> <span class="toc-text">CleanWebpackPlugin</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/bb6c6e3.html b/articles/bb6c6e3.html
index 4a6d4570..44728527 100644
--- a/articles/bb6c6e3.html
+++ b/articles/bb6c6e3.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:36:10'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_19.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue2与3响应式原理</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:36:10.498Z" title="更新于 2024-02-26 19:36:10">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/">Vue2与3响应式原理</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>8分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue2与3响应式原理"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="vue2响应式原理"><a href="#vue2响应式原理" class="headerlink" title="vue2响应式原理"></a>vue2响应式原理</h2><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_19.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue2与3响应式原理</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/">Vue2与3响应式原理</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>8分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue2与3响应式原理"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="vue2响应式原理"><a href="#vue2响应式原理" class="headerlink" title="vue2响应式原理"></a>vue2响应式原理</h2><blockquote>
 <p>通过<code>Object.defineProperty()</code>对属性的读取，修改进行数据劫持；</p>
 <p>get捕获 获取的数据；set捕获 修改的数据；但是添加和删除属性是捕获不到的；</p>
 </blockquote>
@@ -144,7 +144,7 @@
 <blockquote>
 <p> <code>添加</code>和<code>删除</code>捕获不到；</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656844636919vue2yl.png" alt="vue2"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656844636919vue2yl.png" alt="vue2"></p>
 <h2 id="vue2响应式出现的问题及解决方法"><a href="#vue2响应式出现的问题及解决方法" class="headerlink" title="vue2响应式出现的问题及解决方法"></a>vue2响应式出现的问题及解决方法</h2><h3 id="对象中，新增属性、删除属性、界面不会更新-数据会变-；"><a href="#对象中，新增属性、删除属性、界面不会更新-数据会变-；" class="headerlink" title="对象中，新增属性、删除属性、界面不会更新(数据会变)；"></a>对象中，新增属性、删除属性、界面不会更新(数据会变)；</h3><blockquote>
 <p>问题复现</p>
 </blockquote>
@@ -154,7 +154,7 @@ <h2 id="vue2响应式出现的问题及解决方法"><a href="#vue2响应式出
 <p>点击添加属性的按钮；点击删除对象的按钮；</p>
 <p>person对象中有值了，但是页面不渲染</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656844776918vue2yl2.png" alt="obj"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656844776918vue2yl2.png" alt="obj"></p>
 <blockquote>
 <p>解决方法：</p>
 </blockquote>
@@ -166,7 +166,7 @@ <h3 id="直接通过下标修改数组，界面不会自动更新"><a href="#直
 </blockquote>
 <figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; person.hobby &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeLove&quot;</span>&gt;</span>修改第一个爱好<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//使用 Vue.set 需要 从 vue中引入;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">person</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">hobby</span>:[<span class="string">&quot;学习&quot;</span>,<span class="string">&quot;干饭&quot;</span>]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">methods</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 通过下标修改数组</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">changeLove</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">hobby</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">hobby</span>[<span class="number">0</span>]=<span class="string">&quot;study&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">hobby</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656844845915vue2yl3.png" alt="arr"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656844845915vue2yl3.png" alt="arr"></p>
 <blockquote>
 <p>解决方法</p>
 </blockquote>
@@ -188,7 +188,7 @@ <h2 id="vue3响应式原理"><a href="#vue3响应式原理" class="headerlink" t
 <blockquote>
 <p>通过重写，发现 操作 都可以捕获到</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656844921916vue3yl.png" alt="vue3"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656844921916vue3yl.png" alt="vue3"></p>
 <blockquote>
 <p>但 vue3的底层 并不是通过 通过 获取到 target[propName] 这种来修改的；这种有缺陷，而是下面的Reflect；</p>
 <p>知识点： 获取对象的某个属性,除了 <code>obj.属性</code>之外还有下面这个新增的方法</p>
@@ -204,7 +204,7 @@ <h2 id="vue3响应式原理"><a href="#vue3响应式原理" class="headerlink" t
 <p>将重写的代码稍加改动 (vue3响应式原理)</p>
 <p>通过Proxy(代理)对源对象变化的属性进行拦截，通过Reflect(反射)对源对象的属性进行操作；</p>
 </blockquote>
-<figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 源数据</span></span><br><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">20</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 模拟vue3中的响应式  </span></span><br><span class="line"><span class="comment">// Proxy的作用是  用p映射person的操作 参数:映射的对象、对象get set</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Proxy</span>(person,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;某人读取了p上的属性&quot;</span>,target,propName);</span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * 这里有个小知识点: </span></span><br><span class="line"><span class="comment">         * 变量1.变量2 == 变量1[&quot;变量2&quot;] --&gt; 即.变量2 中的 变量2 其实已经不是变量了</span></span><br><span class="line"><span class="comment">         * 变量用[];字符串用点或者[&quot;&quot;]</span></span><br><span class="line"><span class="comment">         * */</span> </span><br><span class="line"></span><br><span class="line">        <span class="comment">// return target.propName;  // undefined</span></span><br><span class="line">        <span class="comment">//  return target[propName]; //张三 </span></span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Reflect</span>.<span class="title function_">get</span>(target,propName);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">set</span>(<span class="params">target,propName,value</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性, value是设置的数据</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`修改了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        <span class="comment">// target[propName]=value;</span></span><br><span class="line">        <span class="title class_">Reflect</span>.<span class="title function_">set</span>(target,propName,value);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 新增了一个删除方法</span></span><br><span class="line">    <span class="title function_">deleteProperty</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`删除了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        <span class="comment">// delete target[propName];  //false ,因为需要返回值,没有返回值为 false;</span></span><br><span class="line">        <span class="comment">// return delete target[propName];</span></span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Reflect</span>.<span class="title function_">deleteProperty</span>(target,propName);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/bb6c6e3.html">https://fsllala.top/articles/bb6c6e3.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/">Vue2与3响应式原理</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_19.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/d61e2f28.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_23.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3响应式数据</div></div></a></div><div class="next-post pull-right"><a href="/articles/459aa16c.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_24.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3 setup参数</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#vue2%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86"><span class="toc-number">1.</span> <span class="toc-text">vue2响应式原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue2%E5%93%8D%E5%BA%94%E5%BC%8F%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">vue2响应式出现的问题及解决方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E4%B8%AD%EF%BC%8C%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7%E3%80%81%E5%88%A0%E9%99%A4%E5%B1%9E%E6%80%A7%E3%80%81%E7%95%8C%E9%9D%A2%E4%B8%8D%E4%BC%9A%E6%9B%B4%E6%96%B0-%E6%95%B0%E6%8D%AE%E4%BC%9A%E5%8F%98-%EF%BC%9B"><span class="toc-number">2.1.</span> <span class="toc-text">对象中，新增属性、删除属性、界面不会更新(数据会变)；</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%B4%E6%8E%A5%E9%80%9A%E8%BF%87%E4%B8%8B%E6%A0%87%E4%BF%AE%E6%94%B9%E6%95%B0%E7%BB%84%EF%BC%8C%E7%95%8C%E9%9D%A2%E4%B8%8D%E4%BC%9A%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0"><span class="toc-number">2.2.</span> <span class="toc-text">直接通过下标修改数组，界面不会自动更新</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86"><span class="toc-number">3.</span> <span class="toc-text">vue3响应式原理</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+<figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 源数据</span></span><br><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">20</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 模拟vue3中的响应式  </span></span><br><span class="line"><span class="comment">// Proxy的作用是  用p映射person的操作 参数:映射的对象、对象get set</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Proxy</span>(person,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;某人读取了p上的属性&quot;</span>,target,propName);</span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * 这里有个小知识点: </span></span><br><span class="line"><span class="comment">         * 变量1.变量2 == 变量1[&quot;变量2&quot;] --&gt; 即.变量2 中的 变量2 其实已经不是变量了</span></span><br><span class="line"><span class="comment">         * 变量用[];字符串用点或者[&quot;&quot;]</span></span><br><span class="line"><span class="comment">         * */</span> </span><br><span class="line"></span><br><span class="line">        <span class="comment">// return target.propName;  // undefined</span></span><br><span class="line">        <span class="comment">//  return target[propName]; //张三 </span></span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Reflect</span>.<span class="title function_">get</span>(target,propName);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">set</span>(<span class="params">target,propName,value</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性, value是设置的数据</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`修改了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        <span class="comment">// target[propName]=value;</span></span><br><span class="line">        <span class="title class_">Reflect</span>.<span class="title function_">set</span>(target,propName,value);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 新增了一个删除方法</span></span><br><span class="line">    <span class="title function_">deleteProperty</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`删除了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        <span class="comment">// delete target[propName];  //false ,因为需要返回值,没有返回值为 false;</span></span><br><span class="line">        <span class="comment">// return delete target[propName];</span></span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Reflect</span>.<span class="title function_">deleteProperty</span>(target,propName);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/bb6c6e3.html">https://fsllala.top/articles/bb6c6e3.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/">Vue2与3响应式原理</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_19.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/d61e2f28.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_23.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3响应式数据</div></div></a></div><div class="next-post pull-right"><a href="/articles/459aa16c.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_24.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3 setup参数</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#vue2%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86"><span class="toc-number">1.</span> <span class="toc-text">vue2响应式原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue2%E5%93%8D%E5%BA%94%E5%BC%8F%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">vue2响应式出现的问题及解决方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E4%B8%AD%EF%BC%8C%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7%E3%80%81%E5%88%A0%E9%99%A4%E5%B1%9E%E6%80%A7%E3%80%81%E7%95%8C%E9%9D%A2%E4%B8%8D%E4%BC%9A%E6%9B%B4%E6%96%B0-%E6%95%B0%E6%8D%AE%E4%BC%9A%E5%8F%98-%EF%BC%9B"><span class="toc-number">2.1.</span> <span class="toc-text">对象中，新增属性、删除属性、界面不会更新(数据会变)；</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%B4%E6%8E%A5%E9%80%9A%E8%BF%87%E4%B8%8B%E6%A0%87%E4%BF%AE%E6%94%B9%E6%95%B0%E7%BB%84%EF%BC%8C%E7%95%8C%E9%9D%A2%E4%B8%8D%E4%BC%9A%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0"><span class="toc-number">2.2.</span> <span class="toc-text">直接通过下标修改数组，界面不会自动更新</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86"><span class="toc-number">3.</span> <span class="toc-text">vue3响应式原理</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/d61e2f28.html b/articles/d61e2f28.html
index dda817fe..7acb9e3f 100644
--- a/articles/d61e2f28.html
+++ b/articles/d61e2f28.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:36:46'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_23.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3响应式数据</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:36:46.346Z" title="更新于 2024-02-26 19:36:46">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/">Vue3响应式数据</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>6分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3响应式数据"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="ref函数"><a href="#ref函数" class="headerlink" title="ref函数"></a>ref函数</h2><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_23.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3响应式数据</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue3/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/">Vue3响应式数据</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>6分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3响应式数据"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="ref函数"><a href="#ref函数" class="headerlink" title="ref函数"></a>ref函数</h2><blockquote>
 <p>通过ref生成一个 <strong>引用对象(ref对象)</strong> ，定义一个<strong>响应式的数据</strong></p>
 </blockquote>
 <blockquote>
@@ -149,7 +149,7 @@
 <blockquote>
 <p>先打印一下转化为响应式的name，是一个<code>引用对象</code></p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845486917ref.png" alt="ref"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656845486917ref.png" alt="ref"></p>
 <blockquote>
 <p>通过ref修改页面展示的数据</p>
 </blockquote>
@@ -162,11 +162,11 @@
 </blockquote>
 <figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 对象.属性 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.type&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.salary&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> job =<span class="title function_">ref</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">//同基本数据类型一样,要想获取到ref里面的响应式的值,需要通过 .value  获取</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(job.<span class="property">value</span>);  </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           changeValue,job</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845582916ref2.png" alt="ref引用数据类型"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656845582916ref2.png" alt="ref引用数据类型"></p>
 <blockquote>
 <p>ref基本数据类型和引用数据类型</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845648916ref3.png" alt="ref"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656845648916ref3.png" alt="ref"></p>
 <blockquote>
 <p>修改ref 引用数据类型的值</p>
 </blockquote>
@@ -177,7 +177,7 @@ <h2 id="reactive函数"><a href="#reactive函数" class="headerlink" title="reac
 </blockquote>
 <figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 对象.属性 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.type&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.salary&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;reactive&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> job =<span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(job); <span class="comment">//reactive不需要.value</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           job,changeValue</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845730916ref4.png" alt="reactive"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656845730916ref4.png" alt="reactive"></p>
 <blockquote>
 <p>修改 reactive 创建出来 的响应式 的数据(Proxy修复了2.x，数据更新了不渲染的问题，vue.$set…)</p>
 <p>不需要.value</p>
@@ -196,12 +196,12 @@ <h2 id="toRefs"><a href="#toRefs" class="headerlink" title="toRefs"></a>toRefs</
 </blockquote>
 <figure class="highlight jsx"><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="keyword">import</span> &#123; reactive, toRefs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> job = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="string">&quot;前端工程师&quot;</span>,</span><br><span class="line">      <span class="attr">salary</span>: <span class="string">&quot;30k&quot;</span>,</span><br><span class="line">      <span class="attr">a</span>: &#123;</span><br><span class="line">        <span class="attr">b</span>: &#123;</span><br><span class="line">          <span class="attr">c</span>: <span class="number">666</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">let</span> jieGou = <span class="title function_">toRefs</span>(job);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(jieGou);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845795916ref5.png" alt="toRefs"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656845795916ref5.png" alt="toRefs"></p>
 <blockquote>
 <p>对Reactive对象进行解构</p>
 </blockquote>
 <figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 对象.属性 --&gt;</span><br><span class="line">  &lt;!-- 因为对象结构赋值了,所以这里少写了一层 job --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; type &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; salary &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; a.b.c &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; reactive, toRefs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> job = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">type</span>: <span class="string">&quot;前端工程师&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">salary</span>: <span class="string">&quot;30k&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">a</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">b</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">          <span class="attr">c</span>: <span class="number">666</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> <span class="title function_">changeValue</span> = (<span class="params"></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      job.<span class="property">type</span> = <span class="string">&quot;全栈开发&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      job.<span class="property">salary</span> = <span class="string">&quot;60k&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      job.<span class="property">a</span>.<span class="property">b</span>.<span class="property">c</span> = <span class="number">999</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123; </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">//在return 的 &#123;&#125; 里 对对象进行解构赋值;相当于添加了 toRef(job,&#x27;type&#x27;),toRef(job,&#x27;salary&#x27;),toRef(job,&#x27;a&#x27;) </span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      ...<span class="title function_">toRefs</span>(job), </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      changeValue,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/d61e2f28.html">https://fsllala.top/articles/d61e2f28.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/">Vue3响应式数据</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_23.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/3a42db2d.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_20.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3</div></div></a></div><div class="next-post pull-right"><a href="/articles/bb6c6e3.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_19.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue2与3响应式原理</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#ref%E5%87%BD%E6%95%B0"><span class="toc-number">1.</span> <span class="toc-text">ref函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#reactive%E5%87%BD%E6%95%B0"><span class="toc-number">2.</span> <span class="toc-text">reactive函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#toRefs"><span class="toc-number">3.</span> <span class="toc-text">toRefs</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/d61e2f28.html">https://fsllala.top/articles/d61e2f28.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/">Vue3响应式数据</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_23.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/3a42db2d.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_20.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue3</div></div></a></div><div class="next-post pull-right"><a href="/articles/bb6c6e3.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_19.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue2与3响应式原理</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#ref%E5%87%BD%E6%95%B0"><span class="toc-number">1.</span> <span class="toc-text">ref函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#reactive%E5%87%BD%E6%95%B0"><span class="toc-number">2.</span> <span class="toc-text">reactive函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#toRefs"><span class="toc-number">3.</span> <span class="toc-text">toRefs</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/d95e4f83.html b/articles/d95e4f83.html
index 3cd702bf..95b46725 100644
--- a/articles/d95e4f83.html
+++ b/articles/d95e4f83.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:34:22'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs3 Express</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:34:22.105Z" title="更新于 2024-02-26 19:34:22">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/Express1/">Express1</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>7分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs3 Express"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Express"><a href="#Express" class="headerlink" title="Express"></a>Express</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_7.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs3 Express</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.895Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/Express1/">Express1</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>7分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs3 Express"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Express"><a href="#Express" class="headerlink" title="Express"></a>Express</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><ul>
 <li>Express 是一个简洁而灵活的 Node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用</li>
 <li>Express内部还是使用的http模块实现服务器创建和监听, 对http模块进行了二次封装</li>
 <li>严格上来说  express就是NodeJS的一个模块  直接下载安装</li>
@@ -228,7 +228,7 @@ <h2 id="热更新"><a href="#热更新" class="headerlink" title="热更新"></a
 <li>直接<code>nodemon </code>运行程序</li>
 <li>注：仅在测试的时候用，上线的时候不能用，因为上线之后一改就重启服务的话……hha……</li>
 </ul>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/d95e4f83.html">https://fsllala.top/articles/d95e4f83.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs-Express/">NodeJs Express</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/e4a31b2e.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_6.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs2服务器</div></div></a></div><div class="next-post pull-right"><a href="/articles/facd74f4.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_2.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Echarts</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/8ba9ed2d.html" title="NodeJs Express"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-29</div><div class="title">NodeJs Express</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Express"><span class="toc-number">1.</span> <span class="toc-text">Express</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E4%BB%8B"><span class="toc-number">1.1.</span> <span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8"><span class="toc-number">1.2.</span> <span class="toc-text">使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#express%E5%93%8D%E5%BA%94"><span class="toc-number">1.3.</span> <span class="toc-text">express响应</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#express%E8%B7%AF%E7%94%B1"><span class="toc-number">1.4.</span> <span class="toc-text">express路由</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E5%A4%B4"><span class="toc-number">1.5.</span> <span class="toc-text">响应头</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#sendFile%E5%93%8D%E5%BA%94%E6%96%87%E4%BB%B6"><span class="toc-number">1.6.</span> <span class="toc-text">sendFile响应文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E6%9E%90get%E5%8F%82%E6%95%B0"><span class="toc-number">1.7.</span> <span class="toc-text">解析get参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0"><span class="toc-number">1.8.</span> <span class="toc-text">路由参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#get%E5%8F%82%E6%95%B0%E5%92%8C%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.9.</span> <span class="toc-text">get参数和路由参数的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%83%AD%E6%9B%B4%E6%96%B0"><span class="toc-number">1.10.</span> <span class="toc-text">热更新</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/d95e4f83.html">https://fsllala.top/articles/d95e4f83.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs-Express/">NodeJs Express</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_7.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/e4a31b2e.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_6.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs2服务器</div></div></a></div><div class="next-post pull-right"><a href="/articles/facd74f4.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_2.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Echarts</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/8ba9ed2d.html" title="NodeJs Express"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_32.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-29</div><div class="title">NodeJs Express</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Express"><span class="toc-number">1.</span> <span class="toc-text">Express</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E4%BB%8B"><span class="toc-number">1.1.</span> <span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8"><span class="toc-number">1.2.</span> <span class="toc-text">使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#express%E5%93%8D%E5%BA%94"><span class="toc-number">1.3.</span> <span class="toc-text">express响应</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#express%E8%B7%AF%E7%94%B1"><span class="toc-number">1.4.</span> <span class="toc-text">express路由</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E5%A4%B4"><span class="toc-number">1.5.</span> <span class="toc-text">响应头</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#sendFile%E5%93%8D%E5%BA%94%E6%96%87%E4%BB%B6"><span class="toc-number">1.6.</span> <span class="toc-text">sendFile响应文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E6%9E%90get%E5%8F%82%E6%95%B0"><span class="toc-number">1.7.</span> <span class="toc-text">解析get参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0"><span class="toc-number">1.8.</span> <span class="toc-text">路由参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#get%E5%8F%82%E6%95%B0%E5%92%8C%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.9.</span> <span class="toc-text">get参数和路由参数的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%83%AD%E6%9B%B4%E6%96%B0"><span class="toc-number">1.10.</span> <span class="toc-text">热更新</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/df38ec5a.html b/articles/df38ec5a.html
index 1d78c2ad..ffbfaa3e 100644
--- a/articles/df38ec5a.html
+++ b/articles/df38ec5a.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:33:11'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,8 +133,8 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">EventLoop</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:33:11.690Z" title="更新于 2024-02-26 19:33:11">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/EventLoop/">EventLoop</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="EventLoop"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="EventLoop-事件循环"><a href="#EventLoop-事件循环" class="headerlink" title="EventLoop(事件循环)"></a>EventLoop(事件循环)</h1><h2 id="概念："><a href="#概念：" class="headerlink" title="概念："></a>概念：</h2><p>首先我们需要知道JS是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656842096917eventLoop.png" alt="eventLoop"></p>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_3.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">EventLoop</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.898Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/EventLoop/">EventLoop</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="EventLoop"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="EventLoop-事件循环"><a href="#EventLoop-事件循环" class="headerlink" title="EventLoop(事件循环)"></a>EventLoop(事件循环)</h1><h2 id="概念："><a href="#概念：" class="headerlink" title="概念："></a>概念：</h2><p>首先我们需要知道JS是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。</p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656842096917eventLoop.png" alt="eventLoop"></p>
 <p>导图要表达的内容用文字来表述的话：</p>
 <ul>
 <li>同步和异步任务分别进入不同的执行”场所”，同步的进入主线程，异步的进入Event Table并注册函数。</li>
@@ -183,7 +183,7 @@ <h2 id="多进程多线程开发"><a href="#多进程多线程开发" class="hea
 <li>当我们的进程中的线程获取获取到时间片时，就可以快速执行我们编写的代码；</li>
 <li>对于用于来说是感受不到这种快速的切换的；</li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/jincheng.png" alt="进程与线程"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/jincheng.png" alt="进程与线程"></p>
 <h2 id="浏览器多进程"><a href="#浏览器多进程" class="headerlink" title="浏览器多进程"></a>浏览器多进程</h2><blockquote>
 <p>浏览器内部工作极其复杂，为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。</p>
 </blockquote>
@@ -268,7 +268,7 @@ <h2 id="宏任务与微任务是怎么执行的"><a href="#宏任务与微任务
 <li><p>总结：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。（每次执行宏任务之前，都会在微任务队列里检查有没有微任务，有的话就先把微任务队列里执行完，然后再执行此个宏任务）</p>
 </li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656842195916eventLoop1.png" alt="宏微任务"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656842195916eventLoop1.png" alt="宏微任务"></p>
 <h2 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h2><p>DEMO1：</p>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;1&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve</span>)&#123;		    </span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;2&#x27;</span>);</span><br><span class="line">	<span class="title function_">resolve</span>();</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;		    </span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;3&#x27;</span>);</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;4&#x27;</span>)</span><br><span class="line">&#125;); 		</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;5&#x27;</span>);</span><br><span class="line"><span class="comment">// 2 5 3 4 1</span></span><br></pre></td></tr></table></figure>
 
@@ -321,7 +321,7 @@ <h2 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</
 <li>我们可以将await关键字后面执行的代码,看做是包裹在(resolve,reject)&#x3D;&gt;{函数执行}的代码；</li>
 <li>await 的下一条语句,可以看做是then(res&#x3D;&gt;{函数执行})中的代码；</li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/asyncQuenen.png" alt="async执行"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/asyncQuenen.png" alt="async执行"></p>
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">    <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">async1</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;async1 start&quot;</span>);</span><br><span class="line">        <span class="keyword">await</span> <span class="title function_">async2</span>();</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;async1 end&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">async2</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;async2&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;script start&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;setTimeout&quot;</span>);</span><br><span class="line">    &#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">async1</span>();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;promise1&quot;</span>);</span><br><span class="line">        <span class="title function_">resolve</span>();</span><br><span class="line">    &#125;).<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;promise2&quot;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;script end&quot;</span>);</span><br><span class="line"><span class="comment">//script start  async1 start  async2  promise1  script end  async1 end  promise2  setTimeout</span></span><br></pre></td></tr></table></figure>
 
 <p>分析：</p>
@@ -340,7 +340,7 @@ <h1 id="参考资料"><a href="#参考资料" class="headerlink" title="参考
 <li><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/87684858">深入理解事件循环</a></li>
 <li><a target="_blank" rel="noopener" href="https://www.cnblogs.com/wangziye/p/9566454.html">JS宏任务和微任务</a></li>
 </ul>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/df38ec5a.html">https://fsllala.top/articles/df38ec5a.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/">宏任务</a><a class="post-meta__tags" href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/">微任务</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/ef0a4464.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_33.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">拖拽</div></div></a></div><div class="next-post pull-right"><a href="/articles/28239a8d.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">面向对象</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#EventLoop-%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF"><span class="toc-number">1.</span> <span class="toc-text">EventLoop(事件循环)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A6%82%E5%BF%B5%EF%BC%9A"><span class="toc-number">1.1.</span> <span class="toc-text">概念：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%95%E4%B8%BA%E5%BC%82%E6%AD%A5"><span class="toc-number">1.2.</span> <span class="toc-text">何为异步</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BA%BF%E7%A8%8B%E4%B8%8E%E8%BF%9B%E7%A8%8B"><span class="toc-number">1.3.</span> <span class="toc-text">线程与进程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BA%BF%E7%A8%8B%E5%92%8C%E8%BF%9B%E7%A8%8B%E6%98%AF%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E4%B8%AD%E7%9A%84%E4%B8%A4%E4%B8%AA%E6%A6%82%E5%BF%B5%EF%BC%9A"><span class="toc-number">1.3.1.</span> <span class="toc-text">线程和进程是操作系统中的两个概念：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%90%AC%E8%B5%B7%E6%9D%A5%E5%BE%88%E6%8A%BD%E8%B1%A1%EF%BC%8C%E6%88%91%E4%BB%AC%E7%9B%B4%E8%A7%82%E4%B8%80%E7%82%B9%E8%A7%A3%E9%87%8A%EF%BC%9A"><span class="toc-number">1.3.2.</span> <span class="toc-text">听起来很抽象，我们直观一点解释：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%86%8D%E7%94%A8%E4%B8%80%E4%B8%AA%E5%BD%A2%E8%B1%A1%E7%9A%84%E4%BE%8B%E5%AD%90%E8%A7%A3%E9%87%8A%EF%BC%9A"><span class="toc-number">1.3.3.</span> <span class="toc-text">再用一个形象的例子解释：</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%9A%E8%BF%9B%E7%A8%8B%E5%A4%9A%E7%BA%BF%E7%A8%8B%E5%BC%80%E5%8F%91"><span class="toc-number">1.4.</span> <span class="toc-text">多进程多线程开发</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%A4%9A%E8%BF%9B%E7%A8%8B"><span class="toc-number">1.5.</span> <span class="toc-text">浏览器多进程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%8F%E4%BB%BB%E5%8A%A1%E4%B8%8E%E5%BE%AE%E4%BB%BB%E5%8A%A1"><span class="toc-number">1.6.</span> <span class="toc-text">宏任务与微任务</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%8F%E4%BB%BB%E5%8A%A1%E4%B8%8E%E5%BE%AE%E4%BB%BB%E5%8A%A1%E6%98%AF%E6%80%8E%E4%B9%88%E6%89%A7%E8%A1%8C%E7%9A%84"><span class="toc-number">1.7.</span> <span class="toc-text">宏任务与微任务是怎么执行的</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A1%88%E4%BE%8B"><span class="toc-number">1.8.</span> <span class="toc-text">案例</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="toc-number">2.</span> <span class="toc-text">参考资料</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/df38ec5a.html">https://fsllala.top/articles/df38ec5a.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/">宏任务</a><a class="post-meta__tags" href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/">微任务</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_3.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/ef0a4464.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_33.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">拖拽</div></div></a></div><div class="next-post pull-right"><a href="/articles/28239a8d.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_31.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">面向对象</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#EventLoop-%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF"><span class="toc-number">1.</span> <span class="toc-text">EventLoop(事件循环)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A6%82%E5%BF%B5%EF%BC%9A"><span class="toc-number">1.1.</span> <span class="toc-text">概念：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%95%E4%B8%BA%E5%BC%82%E6%AD%A5"><span class="toc-number">1.2.</span> <span class="toc-text">何为异步</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BA%BF%E7%A8%8B%E4%B8%8E%E8%BF%9B%E7%A8%8B"><span class="toc-number">1.3.</span> <span class="toc-text">线程与进程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BA%BF%E7%A8%8B%E5%92%8C%E8%BF%9B%E7%A8%8B%E6%98%AF%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E4%B8%AD%E7%9A%84%E4%B8%A4%E4%B8%AA%E6%A6%82%E5%BF%B5%EF%BC%9A"><span class="toc-number">1.3.1.</span> <span class="toc-text">线程和进程是操作系统中的两个概念：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%90%AC%E8%B5%B7%E6%9D%A5%E5%BE%88%E6%8A%BD%E8%B1%A1%EF%BC%8C%E6%88%91%E4%BB%AC%E7%9B%B4%E8%A7%82%E4%B8%80%E7%82%B9%E8%A7%A3%E9%87%8A%EF%BC%9A"><span class="toc-number">1.3.2.</span> <span class="toc-text">听起来很抽象，我们直观一点解释：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%86%8D%E7%94%A8%E4%B8%80%E4%B8%AA%E5%BD%A2%E8%B1%A1%E7%9A%84%E4%BE%8B%E5%AD%90%E8%A7%A3%E9%87%8A%EF%BC%9A"><span class="toc-number">1.3.3.</span> <span class="toc-text">再用一个形象的例子解释：</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%9A%E8%BF%9B%E7%A8%8B%E5%A4%9A%E7%BA%BF%E7%A8%8B%E5%BC%80%E5%8F%91"><span class="toc-number">1.4.</span> <span class="toc-text">多进程多线程开发</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%A4%9A%E8%BF%9B%E7%A8%8B"><span class="toc-number">1.5.</span> <span class="toc-text">浏览器多进程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%8F%E4%BB%BB%E5%8A%A1%E4%B8%8E%E5%BE%AE%E4%BB%BB%E5%8A%A1"><span class="toc-number">1.6.</span> <span class="toc-text">宏任务与微任务</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%8F%E4%BB%BB%E5%8A%A1%E4%B8%8E%E5%BE%AE%E4%BB%BB%E5%8A%A1%E6%98%AF%E6%80%8E%E4%B9%88%E6%89%A7%E8%A1%8C%E7%9A%84"><span class="toc-number">1.7.</span> <span class="toc-text">宏任务与微任务是怎么执行的</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A1%88%E4%BE%8B"><span class="toc-number">1.8.</span> <span class="toc-text">案例</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="toc-number">2.</span> <span class="toc-text">参考资料</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/e4a31b2e.html b/articles/e4a31b2e.html
index 1b66ba4c..ff6f68ca 100644
--- a/articles/e4a31b2e.html
+++ b/articles/e4a31b2e.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:34:13'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_6.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs2服务器</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:34:13.265Z" title="更新于 2024-02-26 19:34:13">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>18分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs2服务器"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="NodeJs服务器"><a href="#NodeJs服务器" class="headerlink" title="NodeJs服务器"></a>NodeJs服务器</h1><h2 id="创建服务器"><a href="#创建服务器" class="headerlink" title="创建服务器"></a>创建服务器</h2><p>res.end()；里面的内容可以展示在定义的接口网页中。</p>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_6.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">NodeJs2服务器</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.895Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/NodeJs/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>18分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="NodeJs2服务器"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="NodeJs服务器"><a href="#NodeJs服务器" class="headerlink" title="NodeJs服务器"></a>NodeJs服务器</h1><h2 id="创建服务器"><a href="#创建服务器" class="headerlink" title="创建服务器"></a>创建服务器</h2><p>res.end()；里面的内容可以展示在定义的接口网页中。</p>
 <ul>
 <li>method1：</li>
 </ul>
@@ -304,7 +304,7 @@ <h2 id="登录注册案例"><a href="#登录注册案例" class="headerlink" tit
 
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&quot;http&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> url = <span class="built_in">require</span>(<span class="string">&quot;url&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> qs = <span class="built_in">require</span>(<span class="string">&quot;querystring&quot;</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> server = http.<span class="title function_">createServer</span>().<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="string">&quot;127.0.0.1&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;服务器正在运行...&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">server.<span class="title function_">on</span>(<span class="string">&quot;request&quot;</span>, <span class="function">(<span class="params">req, res</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 获取我们请求的路径</span></span><br><span class="line">    <span class="keyword">let</span> requestUrl = url.<span class="title function_">parse</span>(req.<span class="property">url</span>).<span class="property">pathname</span>;</span><br><span class="line">    <span class="keyword">if</span>(requestUrl==<span class="string">&quot;/register.html&quot;</span>)&#123;</span><br><span class="line">      <span class="comment">// 设置头信息</span></span><br><span class="line">      res.<span class="title function_">writeHead</span>(<span class="number">200</span>,&#123;<span class="string">&#x27;Content-type&#x27;</span>:<span class="string">&#x27;text/html;charset=utf-8&#x27;</span>&#125;);</span><br><span class="line">      res.<span class="title function_">end</span>(<span class="title function_">thePath</span>(<span class="string">&quot;./register.html&quot;</span>))</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(requestUrl==<span class="string">&quot;/login.html&quot;</span>)&#123;</span><br><span class="line">        <span class="comment">// 设置头信息</span></span><br><span class="line">        res.<span class="title function_">writeHead</span>(<span class="number">200</span>,&#123;<span class="string">&#x27;Content-type&#x27;</span>:<span class="string">&#x27;text/html;charset=utf-8&#x27;</span>&#125;);</span><br><span class="line">        res.<span class="title function_">end</span>(<span class="title function_">thePath</span>(<span class="string">&quot;./login.html&quot;</span>))</span><br><span class="line">      &#125;<span class="keyword">else</span> <span class="keyword">if</span> (requestUrl == <span class="string">&quot;/add&quot;</span>) &#123;</span><br><span class="line">         <span class="comment">// 设置头信息</span></span><br><span class="line">        res.<span class="title function_">writeHead</span>(<span class="number">200</span>,&#123;<span class="string">&#x27;Content-type&#x27;</span>:<span class="string">&#x27;text/html;charset=utf-8&#x27;</span>&#125;);</span><br><span class="line">        <span class="comment">// 我们获取路径中的get参数;可以先打印看一下属性,然后确定了用query属性</span></span><br><span class="line">        <span class="keyword">let</span> reqUrl = url.<span class="title function_">parse</span>(req.<span class="property">url</span>).<span class="property">query</span>; <span class="comment">//&#x27;username=zs&amp;password=20&#x27;</span></span><br><span class="line">        <span class="comment">//处理get参数  将get参数转化成对象格式</span></span><br><span class="line">        <span class="keyword">let</span> qsResult = qs.<span class="title function_">parse</span>(reqUrl); <span class="comment">//&#123; username: &#x27;zs&#x27;, password: &#x27;20&#x27; &#125;</span></span><br><span class="line">        <span class="keyword">let</span> jsonArr = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title function_">thePath</span>(<span class="string">&quot;./member.json&quot;</span>)); <span class="comment">//默认是字符串,需转为数组(json)</span></span><br><span class="line">        <span class="comment">// 完善用户信息</span></span><br><span class="line">        qsResult.<span class="property">id</span> = jsonArr[jsonArr.<span class="property">length</span> - <span class="number">1</span>].<span class="property">id</span> + <span class="number">1</span>, <span class="comment">//id的话直接用length-1的话,如果前面删除了,则会产生重复的id</span></span><br><span class="line">        qsResult.<span class="property">isBloack</span> = <span class="literal">false</span>;</span><br><span class="line">        jsonArr.<span class="title function_">push</span>(qsResult);  <span class="comment">// jsonArr也就是前端发送的数据(注册数据)追加到数组中</span></span><br><span class="line">        <span class="comment">// 因为要看是否存储成功,所以这里得用异步写入 (异步相较于同步多了callback 函数，单个参数 err 和用于返回错误。)</span></span><br><span class="line">        fs.<span class="title function_">writeFile</span>(path.<span class="title function_">resolve</span>(__dirname,<span class="string">&quot;./member.json&quot;</span>), <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(jsonArr), &#123;</span><br><span class="line">            <span class="attr">flag</span>: <span class="string">&quot;w&quot;</span>,</span><br><span class="line">            <span class="attr">encoding</span>: <span class="string">&quot;utf-8&quot;</span></span><br><span class="line">        &#125;, <span class="function"><span class="params">error</span>=&gt;</span>&#123;</span><br><span class="line">            <span class="keyword">if</span> (error) res.<span class="title function_">end</span>(<span class="string">&quot;&lt;script&gt;alert(&#x27;注册失败&#x27;);location.href=&#x27;http://127.0.0.1:3000/register.html&#x27;&lt;/script&gt;&quot;</span>);</span><br><span class="line">            <span class="keyword">else</span> res.<span class="title function_">end</span>(<span class="string">&quot;&lt;script&gt;alert(&#x27;注册成功&#x27;);location.href=&#x27;http://127.0.0.1:3000/login.html&#x27;&lt;/script&gt;&quot;</span>);</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span> (requestUrl==<span class="string">&quot;/login&quot;</span>)&#123;</span><br><span class="line">        <span class="comment">// 设置头信息</span></span><br><span class="line">        res.<span class="title function_">writeHead</span>(<span class="number">200</span>,&#123;<span class="string">&#x27;Content-type&#x27;</span>:<span class="string">&#x27;text/html;charset=utf-8&#x27;</span>&#125;)</span><br><span class="line">        <span class="comment">// 获取路径中的get参数</span></span><br><span class="line">        <span class="keyword">let</span> reqUrl = url.<span class="title function_">parse</span>(req.<span class="property">url</span>).<span class="property">query</span>; <span class="comment">//&#x27;username=zs&amp;password=20&#x27;</span></span><br><span class="line">        <span class="comment">// 将get参数转为对象格式</span></span><br><span class="line">        <span class="keyword">let</span> qsResult = qs.<span class="title function_">parse</span>(reqUrl);</span><br><span class="line">        <span class="keyword">let</span> &#123;username,password&#125;=qsResult;</span><br><span class="line">        <span class="comment">// 将所有的数据取出</span></span><br><span class="line">        <span class="keyword">let</span> jsonArr = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title function_">thePath</span>(<span class="string">&quot;./member.json&quot;</span>));</span><br><span class="line">        <span class="comment">//查看JSON中是否有用户名和密码  是否吻合</span></span><br><span class="line">        <span class="comment">// find 返回数组中第一个符合的元素的值(并且不检查剩余值);参数：(item,index,arr);找不到返回undefined</span></span><br><span class="line">        <span class="keyword">let</span> loginResult = jsonArr.<span class="title function_">find</span>(<span class="function"><span class="params">item</span>=&gt;</span>&#123;</span><br><span class="line">            <span class="keyword">return</span> item.<span class="property">username</span>==username;</span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="comment">//console.log(loginResult)// &#123; username: &#x27;fwd&#x27;, password: &#x27;123321&#x27;, id: 4, isBloack: false &#125;</span></span><br><span class="line">        <span class="comment">// 判断用户是否存在</span></span><br><span class="line">        <span class="keyword">if</span>(loginResult==<span class="literal">undefined</span>)&#123;</span><br><span class="line">            res.<span class="title function_">end</span>(<span class="string">&quot;&lt;script&gt;alert(&#x27;用户不存在&#x27;);location.href=&#x27;http://127.0.0.1:3000/register.html&#x27;&lt;/script&gt;&quot;</span>)</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="comment">// 判断是否禁用</span></span><br><span class="line">            <span class="keyword">if</span> (loginResult.<span class="property">isBloack</span>==<span class="literal">true</span>)&#123;</span><br><span class="line">                res.<span class="title function_">end</span>(<span class="string">&quot;&lt;script&gt;alert(&#x27;账户已被拉黑&#x27;);location.href=&#x27;http://127.0.0.1:3000/register.html&#x27;&lt;/script&gt;&quot;</span>)</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                <span class="keyword">if</span>(loginResult.<span class="property">password</span>!=password)&#123;</span><br><span class="line">                 <span class="comment">// 判断密码是否正确</span></span><br><span class="line">                    res.<span class="title function_">end</span>(<span class="string">&quot;&lt;script&gt;alert(&#x27;密码错误&#x27;);location.href=&#x27;http://127.0.0.1:3000/register.html&#x27;&lt;/script&gt;&quot;</span>)</span><br><span class="line">                &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                    res.<span class="title function_">end</span>(<span class="string">&quot;&lt;script&gt;alert(&#x27;登陆成功&#x27;);location.href=&#x27;http://127.0.0.1:3000/register.html&#x27;&lt;/script&gt;&quot;</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">thePath</span>(<span class="params">absolutePath</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> fs.<span class="title function_">readFileSync</span>(path.<span class="title function_">resolve</span>(__dirname, absolutePath), <span class="string">&quot;utf-8&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/e4a31b2e.html">https://fsllala.top/articles/e4a31b2e.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/">NodeJs服务器</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_6.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/8b67a7b3.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_5.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs1内置模块</div></div></a></div><div class="next-post pull-right"><a href="/articles/d95e4f83.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs3 Express</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-number">1.</span> <span class="toc-text">NodeJs服务器</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-number">1.1.</span> <span class="toc-text">创建服务器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94"><span class="toc-number">1.2.</span> <span class="toc-text">响应</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%99%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%93%8D%E5%BA%94%E7%9A%84%E7%BB%93%E6%9E%9C%E6%95%B0%E6%8D%AE"><span class="toc-number">1.2.1.</span> <span class="toc-text">给客户端响应的结果数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%94%E5%9B%9E%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-number">1.2.2.</span> <span class="toc-text">返回状态码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-number">1.2.3.</span> <span class="toc-text">设置状态码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E5%A4%B4%E6%96%87%E4%BB%B6"><span class="toc-number">1.2.4.</span> <span class="toc-text">响应头文件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%B7%E6%B1%82"><span class="toc-number">1.3.</span> <span class="toc-text">请求</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#request%E5%AF%B9%E8%B1%A1%E4%B8%AD%E5%B0%81%E8%A3%85%E4%BA%86%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%BB%99%E6%88%91%E4%BB%AC%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BC%A0%E8%BF%87%E6%9D%A5%E7%9A%84%E6%89%80%E6%9C%89%E4%BF%A1%E6%81%AF"><span class="toc-number">1.3.1.</span> <span class="toc-text">request对象中封装了客户端给我们服务器传过来的所有信息:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E9%80%9A%E8%BF%87%E4%B8%8D%E5%90%8C%E7%9A%84%E8%AF%B7%E6%B1%82%E8%B7%AF%E7%94%B1%EF%BC%8C%E5%81%9A%E5%87%BA%E4%B8%8D%E5%90%8C%E5%93%8D%E5%BA%94%E5%91%A2%EF%BC%9F"><span class="toc-number">1.3.2.</span> <span class="toc-text">如何通过不同的请求路由，做出不同响应呢？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96post%E8%AF%B7%E6%B1%82body%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E5%91%A2%EF%BC%9F"><span class="toc-number">1.3.3.</span> <span class="toc-text">如何获取post请求body中的数据呢？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#headers%E5%B1%9E%E6%80%A7"><span class="toc-number">1.3.4.</span> <span class="toc-text">headers属性</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C%E6%A1%88%E4%BE%8B"><span class="toc-number">1.4.</span> <span class="toc-text">登录注册案例</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/e4a31b2e.html">https://fsllala.top/articles/e4a31b2e.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/">NodeJs服务器</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_6.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/8b67a7b3.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_5.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs1内置模块</div></div></a></div><div class="next-post pull-right"><a href="/articles/d95e4f83.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_7.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs3 Express</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-number">1.</span> <span class="toc-text">NodeJs服务器</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-number">1.1.</span> <span class="toc-text">创建服务器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94"><span class="toc-number">1.2.</span> <span class="toc-text">响应</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%99%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%93%8D%E5%BA%94%E7%9A%84%E7%BB%93%E6%9E%9C%E6%95%B0%E6%8D%AE"><span class="toc-number">1.2.1.</span> <span class="toc-text">给客户端响应的结果数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%94%E5%9B%9E%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-number">1.2.2.</span> <span class="toc-text">返回状态码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-number">1.2.3.</span> <span class="toc-text">设置状态码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E5%A4%B4%E6%96%87%E4%BB%B6"><span class="toc-number">1.2.4.</span> <span class="toc-text">响应头文件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%B7%E6%B1%82"><span class="toc-number">1.3.</span> <span class="toc-text">请求</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#request%E5%AF%B9%E8%B1%A1%E4%B8%AD%E5%B0%81%E8%A3%85%E4%BA%86%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%BB%99%E6%88%91%E4%BB%AC%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BC%A0%E8%BF%87%E6%9D%A5%E7%9A%84%E6%89%80%E6%9C%89%E4%BF%A1%E6%81%AF"><span class="toc-number">1.3.1.</span> <span class="toc-text">request对象中封装了客户端给我们服务器传过来的所有信息:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E9%80%9A%E8%BF%87%E4%B8%8D%E5%90%8C%E7%9A%84%E8%AF%B7%E6%B1%82%E8%B7%AF%E7%94%B1%EF%BC%8C%E5%81%9A%E5%87%BA%E4%B8%8D%E5%90%8C%E5%93%8D%E5%BA%94%E5%91%A2%EF%BC%9F"><span class="toc-number">1.3.2.</span> <span class="toc-text">如何通过不同的请求路由，做出不同响应呢？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96post%E8%AF%B7%E6%B1%82body%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E5%91%A2%EF%BC%9F"><span class="toc-number">1.3.3.</span> <span class="toc-text">如何获取post请求body中的数据呢？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#headers%E5%B1%9E%E6%80%A7"><span class="toc-number">1.3.4.</span> <span class="toc-text">headers属性</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C%E6%A1%88%E4%BE%8B"><span class="toc-number">1.4.</span> <span class="toc-text">登录注册案例</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/e8f85541.html b/articles/e8f85541.html
index 22893154..3e4e6d91 100644
--- a/articles/e8f85541.html
+++ b/articles/e8f85541.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:40:15'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">原型与原型链</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:40:15.435Z" title="更新于 2024-02-26 19:40:15">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E5%8E%9F%E5%9E%8B/">原型</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E5%8E%9F%E5%9E%8B/%E5%8E%9F%E5%9E%8B%E9%93%BE/">原型链</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>4分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="原型与原型链"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h1><h2 id="构造函数创建对象"><a href="#构造函数创建对象" class="headerlink" title="构造函数创建对象"></a>构造函数创建对象</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;zs&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person1.<span class="property">name</span>)</span><br></pre></td></tr></table></figure>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_36.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">原型与原型链</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E5%8E%9F%E5%9E%8B/">原型</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E5%8E%9F%E5%9E%8B/%E5%8E%9F%E5%9E%8B%E9%93%BE/">原型链</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>4分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="原型与原型链"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h1><h2 id="构造函数创建对象"><a href="#构造函数创建对象" class="headerlink" title="构造函数创建对象"></a>构造函数创建对象</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;zs&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person1.<span class="property">name</span>)</span><br></pre></td></tr></table></figure>
 
 <p>在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。很简单吧，接下来进入正题：</p>
 <h2 id="prototype"><a href="#prototype" class="headerlink" title="prototype"></a>prototype</h2><p>每个函数或者类(其实本质就是一个函数)都天生自带prototype属性，prototype是对象数据类型。</p>
@@ -143,7 +143,7 @@ <h2 id="prototype"><a href="#prototype" class="headerlink" title="prototype"></a
 <p>其实，函数的prototype属性指向了一个对象，这个对象正是调用该构造函数而创建<strong>实例</strong>的原型，也就是上述例子中person1和person2的原型。</p>
 <p>那什么是原型呢？你可以这样理解：每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型”继承”属性。</p>
 <p>让我们用一张图表示构造函数和实例原型之间的关系：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847783916yx.png" alt="原型1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847783916yx.png" alt="原型1"></p>
 <p>在这张图中我们用 Object.prototype 表示实例原型。</p>
 <p>那么我们该怎么表示实例与实例原型，也就是 person 和 Person.prototype 之间的关系呢，这时候我们就要讲到第二个属性：</p>
 <h2 id="proto"><a href="#proto" class="headerlink" title="proto"></a><strong>proto</strong></h2><p>这是每一个JavaScript对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向该对象的原型。</p>
@@ -151,21 +151,21 @@ <h2 id="proto"><a href="#proto" class="headerlink" title="proto"></a><strong>pro
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">__proto__</span> === <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
 
 <p>于是我们更新下关系图：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847817916yx2.png" alt="原型2"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847817916yx2.png" alt="原型2"></p>
 <p>既然实例对象和构造函数都可以指向原型，那么原型是否有属性指向构造函数或者实例呢？</p>
 <h2 id="constructor-NaN"><a href="#constructor-NaN" class="headerlink" title="constructor"></a>constructor</h2><p>指向实例倒是没有，因为一个构造函数可以生成多个实例，但是原型指向构造函数倒是有的，这就要讲到第三个属性：constructor，每个原型都有一个 constructor 属性指向关联的构造函数。</p>
 <p>为了验证这一点，我们可以尝试：</p>
 <figure class="highlight js"><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"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span> === <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
 
 <p>所以再更新下关系图：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847852917yx3.png" alt="原型3"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847852917yx3.png" alt="原型3"></p>
 <p>综上我们已经得出：</p>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">__proto__</span> == <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>) <span class="comment">// true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> == <span class="title class_">Person</span>) <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 顺便学习一个ES5的方法,可以获得对象的原型</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">getPrototypeOf</span>(person) === <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>) <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
 
 <h2 id="简述"><a href="#简述" class="headerlink" title="简述"></a>简述</h2><p>以上内容可以用以下简述</p>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">  每个函数或者类(其实本质就是一个函数)都天生自带prototype属性   </span></span><br><span class="line"><span class="comment">  prototype是对象数据类型,浏览器天生给prototype这个对象增加了constructor属性,指向当前函数本身</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;哈哈&quot;</span>)</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Max</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;hha&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">dir</span>(sum);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">dir</span>(<span class="title class_">Max</span>);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847890917yx4.png" alt="原型4"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847890917yx4.png" alt="原型4"></p>
 <h1 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h1><p>原型链是一种查找机制，当前实例用到某个属性或方法，当前实例自己有先用私有的，私有的没有，当前实例会通过__proto__这个属性，往当前这个实例所属类的原型进行查找，找不不到再通过__proto__这个属性往原型的原型进行查找，直到找不到为止就结束了；(找不到是null)</p>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">name</span> = <span class="string">&#x27;Kevin&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"></span><br><span class="line">person.<span class="property">name</span> = <span class="string">&#x27;Daisy&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name</span>) <span class="comment">// Daisy</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">delete</span> person.<span class="property">name</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name</span>) <span class="comment">// Kevin</span></span><br></pre></td></tr></table></figure>
 
@@ -176,12 +176,12 @@ <h2 id="原型的原型"><a href="#原型的原型" class="headerlink" title="
 <figure class="highlight js"><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"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">obj.<span class="property">name</span> = <span class="string">&#x27;Kevin&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span>) <span class="comment">// Kevin</span></span><br></pre></td></tr></table></figure>
 
 <p>其实原型对象(Person.prototype)就是通过 Object 构造函数生成的，结合之前所讲，实例的 <strong>proto</strong> 指向构造函数的 prototype ，所以我们再更新下关系图：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847925973yx5.png" alt="原型链"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847925973yx5.png" alt="原型链"></p>
 <p>那Object.prototype 的原型呢？</p>
 <p>null，我们可以打印：</p>
 <p><code>console.log(Object.prototype.__proto__ === null) // true</code></p>
 <p>所以查找属性的时候查到 Object.prototype 就可以停止查找了。最后一张关系图也可以更新为：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847955916yx6.png" alt="原型与原型链"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656847955916yx6.png" alt="原型与原型链"></p>
 <p>顺便还要说一下，图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。	</p>
 <h1 id="后续补充"><a href="#后续补充" class="headerlink" title="后续补充"></a>后续补充</h1><ul>
 <li><p>本质上，所有的对象都是通过<code>new 函数</code>的方式创建的；</p>
@@ -194,9 +194,9 @@ <h1 id="后续补充"><a href="#后续补充" class="headerlink" title="后续
 <li><p>上述也可以用下图表示：</p>
 </li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/prototype_add.png"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/prototype_add.png"></p>
 <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a target="_blank" rel="noopener" href="https://github.com/mqyqingfeng/Blog/issues/2">mqyqingfeng_blog</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/e8f85541.html">https://fsllala.top/articles/e8f85541.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%8E%9F%E5%9E%8B/">原型</a><a class="post-meta__tags" href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/">原型链</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/28239a8d.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">面向对象</div></div></a></div><div class="next-post pull-right"><a href="/articles/8b67a7b3.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_5.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs1内置模块</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B"><span class="toc-number">1.</span> <span class="toc-text">原型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.1.</span> <span class="toc-text">构造函数创建对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#prototype"><span class="toc-number">1.2.</span> <span class="toc-text">prototype</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#proto"><span class="toc-number">1.3.</span> <span class="toc-text">proto</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#constructor-NaN"><span class="toc-number">1.4.</span> <span class="toc-text">constructor</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E8%BF%B0"><span class="toc-number">1.5.</span> <span class="toc-text">简述</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B%E9%93%BE"><span class="toc-number">2.</span> <span class="toc-text">原型链</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B%E7%9A%84%E5%8E%9F%E5%9E%8B"><span class="toc-number">2.1.</span> <span class="toc-text">原型的原型</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%90%8E%E7%BB%AD%E8%A1%A5%E5%85%85"><span class="toc-number">3.</span> <span class="toc-text">后续补充</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">4.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/e8f85541.html">https://fsllala.top/articles/e8f85541.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%8E%9F%E5%9E%8B/">原型</a><a class="post-meta__tags" href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/">原型链</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_36.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/28239a8d.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_31.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">面向对象</div></div></a></div><div class="next-post pull-right"><a href="/articles/8b67a7b3.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_5.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">NodeJs1内置模块</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B"><span class="toc-number">1.</span> <span class="toc-text">原型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.1.</span> <span class="toc-text">构造函数创建对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#prototype"><span class="toc-number">1.2.</span> <span class="toc-text">prototype</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#proto"><span class="toc-number">1.3.</span> <span class="toc-text">proto</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#constructor-NaN"><span class="toc-number">1.4.</span> <span class="toc-text">constructor</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E8%BF%B0"><span class="toc-number">1.5.</span> <span class="toc-text">简述</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B%E9%93%BE"><span class="toc-number">2.</span> <span class="toc-text">原型链</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B%E7%9A%84%E5%8E%9F%E5%9E%8B"><span class="toc-number">2.1.</span> <span class="toc-text">原型的原型</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%90%8E%E7%BB%AD%E8%A1%A5%E5%85%85"><span class="toc-number">3.</span> <span class="toc-text">后续补充</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">4.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/e98504f5.html b/articles/e98504f5.html
index 45d9fbb4..c1f9cc48 100644
--- a/articles/e98504f5.html
+++ b/articles/e98504f5.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-03-03 18:43:46'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,12 +133,12 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_28.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">深浅拷贝</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-03-03T10:43:46.387Z" title="更新于 2024-03-03 18:43:46">2024-03-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/">深浅拷贝</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>7分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="深浅拷贝"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="对象的引用赋值"><a href="#对象的引用赋值" class="headerlink" title="对象的引用赋值"></a>对象的引用赋值</h2><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_28.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">深浅拷贝</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.878Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/">深浅拷贝</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>7分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="深浅拷贝"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="对象的引用赋值"><a href="#对象的引用赋值" class="headerlink" title="对象的引用赋值"></a>对象的引用赋值</h2><blockquote>
 <p>js中一旦遇到引用数据类型，就会开辟一块堆内存，将引用数据类型的值进行储存，并给这块堆内存分配一个16进制地址。</p>
 </blockquote>
 <figure class="highlight js"><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"><span class="keyword">const</span> info = &#123;<span class="attr">name</span>:<span class="string">&quot;forward&quot;</span>,<span class="attr">age</span>:<span class="number">24</span>&#125;;</span><br><span class="line"><span class="keyword">const</span> obj = info;</span><br><span class="line">obj.<span class="property">age</span>=<span class="number">23</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">age</span>);<span class="comment">//23</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656848745916kbb.png" alt="引用赋值"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656848745916kbb.png" alt="引用赋值"></p>
 <h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h2><ul>
 <li>浅拷贝：将第一层的数据数据完全拷贝过来，如果有引用类型，引用类型指向的是一个16进制地址，也会拷贝过来(即：拷贝的引用类型和原数据指向同一个内存地址)</li>
 <li>(对象)如果属性是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址</li>
@@ -156,13 +156,13 @@ <h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a
 <p>例如：</p>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//Object.assign()对象的浅拷贝</span></span><br><span class="line"><span class="keyword">const</span> info = &#123; <span class="attr">name</span>: <span class="string">&quot;forward&quot;</span>, <span class="attr">age</span>: <span class="number">24</span> &#125;;</span><br><span class="line"><span class="comment">//把info对象中的所有属性拷贝一份,放到第一个对象&#123;&#125;里面;若第一个对象&#123;&#125;有相同的属性,则会被后面的替换掉;</span></span><br><span class="line"><span class="keyword">const</span> obj = <span class="title class_">Object</span>.<span class="title function_">assign</span>(&#123;&#125;,info);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);<span class="comment">//&#123;name: &#x27;forward&#x27;, age: 24&#125;</span></span><br><span class="line">obj.<span class="property">age</span>=<span class="number">23</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">age</span>);<span class="comment">//24</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846204916qkb.png" alt="对象浅拷贝"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656846204916qkb.png" alt="对象浅拷贝"></p>
 <blockquote>
 <p>将上述代码进行简单修改，加一个对象参数；这个对象参数会开辟一块堆内存(16进制地址)；浅拷贝会将第一层的数据数据完全拷贝过来，引用类型指向的是一个16进制地址，也会拷贝过来(即：拷贝的引用类型指向同一个内存地址)；</p>
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//Object.assign()对象的浅拷贝</span></span><br><span class="line"><span class="keyword">const</span> info = &#123; <span class="attr">name</span>: <span class="string">&quot;forward&quot;</span>, <span class="attr">age</span>: <span class="number">24</span>,<span class="attr">friend</span>:&#123;<span class="attr">name</span>:<span class="string">&quot;zhangsan&quot;</span>,<span class="attr">age</span>:<span class="number">23</span>&#125; &#125;;</span><br><span class="line"><span class="keyword">const</span> obj = <span class="title class_">Object</span>.<span class="title function_">assign</span>(&#123;&#125;,info);</span><br><span class="line">obj.<span class="property">friend</span>.<span class="property">name</span>=<span class="string">&quot;lisi&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">friend</span>.<span class="property">name</span>);<span class="comment">//lisi</span></span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1709462451619.jpg" alt="浅拷贝"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1709462451619.jpg" alt="浅拷贝"></p>
 <h3 id="Lodash-JS库"><a href="#Lodash-JS库" class="headerlink" title="Lodash  JS库"></a>Lodash  JS库</h3><blockquote>
 <p>Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库；用<code>_.clone(xxx)</code>实现浅拷贝；详见：<a target="_blank" rel="noopener" href="https://www.lodashjs.com/">Lodash 中文文档</a></p>
 </blockquote>
@@ -266,7 +266,7 @@ <h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考
 <p><a target="_blank" rel="noopener" href="https://github.com/mqyqingfeng/Blog/issues/32">JavaScript专题之深浅拷贝</a></p>
 <p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000017776457">详细解析赋值、浅拷贝和深拷贝的区别</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/a791226606/article/details/110679991">hasOwnProperty() 方法详解</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/e98504f5.html">https://fsllala.top/articles/e98504f5.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/">深浅拷贝</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_28.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/6e473482.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_37.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">栈内存和堆内存</div></div></a></div><div class="next-post pull-right"><a href="/articles/f6275dee.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_15.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">JSON.stringify 深拷贝弊端</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%BC%95%E7%94%A8%E8%B5%8B%E5%80%BC"><span class="toc-number">1.</span> <span class="toc-text">对象的引用赋值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="toc-number">2.</span> <span class="toc-text">浅拷贝</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Lodash-JS%E5%BA%93"><span class="toc-number">2.1.</span> <span class="toc-text">Lodash  JS库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="toc-number">2.2.</span> <span class="toc-text">数组的浅拷贝</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D"><span class="toc-number">3.</span> <span class="toc-text">深拷贝</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#JSON-parse-JSON-string-xxx"><span class="toc-number">3.1.</span> <span class="toc-text">JSON.parse(JSON.string(xxx))</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Lodash-JS%E5%BA%93-1"><span class="toc-number">3.2.</span> <span class="toc-text">Lodash  JS库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%85%E6%8B%B7%E8%B4%9D-%E9%80%92%E5%BD%92"><span class="toc-number">3.3.</span> <span class="toc-text">浅拷贝+递归</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#structuredClone"><span class="toc-number">3.4.</span> <span class="toc-text">structuredClone()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%8B%E5%86%99%E6%B5%85-%E6%B7%B1-%E6%8B%B7%E8%B4%9D"><span class="toc-number">4.</span> <span class="toc-text">手写浅(深)拷贝</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%85%E6%8B%B7%E8%B4%9D-1"><span class="toc-number">4.1.</span> <span class="toc-text">浅拷贝</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D-1"><span class="toc-number">4.2.</span> <span class="toc-text">深拷贝</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">5.</span> <span class="toc-text">总结</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">6.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/e98504f5.html">https://fsllala.top/articles/e98504f5.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/">深浅拷贝</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_28.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/6e473482.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_37.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">栈内存和堆内存</div></div></a></div><div class="next-post pull-right"><a href="/articles/f6275dee.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_15.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">JSON.stringify 深拷贝弊端</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%BC%95%E7%94%A8%E8%B5%8B%E5%80%BC"><span class="toc-number">1.</span> <span class="toc-text">对象的引用赋值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="toc-number">2.</span> <span class="toc-text">浅拷贝</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Lodash-JS%E5%BA%93"><span class="toc-number">2.1.</span> <span class="toc-text">Lodash  JS库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="toc-number">2.2.</span> <span class="toc-text">数组的浅拷贝</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D"><span class="toc-number">3.</span> <span class="toc-text">深拷贝</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#JSON-parse-JSON-string-xxx"><span class="toc-number">3.1.</span> <span class="toc-text">JSON.parse(JSON.string(xxx))</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Lodash-JS%E5%BA%93-1"><span class="toc-number">3.2.</span> <span class="toc-text">Lodash  JS库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%85%E6%8B%B7%E8%B4%9D-%E9%80%92%E5%BD%92"><span class="toc-number">3.3.</span> <span class="toc-text">浅拷贝+递归</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#structuredClone"><span class="toc-number">3.4.</span> <span class="toc-text">structuredClone()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%8B%E5%86%99%E6%B5%85-%E6%B7%B1-%E6%8B%B7%E8%B4%9D"><span class="toc-number">4.</span> <span class="toc-text">手写浅(深)拷贝</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%85%E6%8B%B7%E8%B4%9D-1"><span class="toc-number">4.1.</span> <span class="toc-text">浅拷贝</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D-1"><span class="toc-number">4.2.</span> <span class="toc-text">深拷贝</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">5.</span> <span class="toc-text">总结</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">6.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/ee7734c7.html b/articles/ee7734c7.html
index 95d2ee76..5c2e0eec 100644
--- a/articles/ee7734c7.html
+++ b/articles/ee7734c7.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:38:35'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_27.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">开机自启</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:38:35.312Z" title="更新于 2024-02-26 19:38:35">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%BC%80%E6%9C%BA%E8%87%AA%E5%90%AF/">开机自启</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">714</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>2分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="开机自启"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>客户要求计算机开启，自动执行bat文件。</p>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_27.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">开机自启</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%BC%80%E6%9C%BA%E8%87%AA%E5%90%AF/">开机自启</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">714</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>2分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="开机自启"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>客户要求计算机开启，自动执行bat文件。</p>
 <h1 id="步骤"><a href="#步骤" class="headerlink" title="步骤"></a>步骤</h1><h2 id="方法一：使用bat"><a href="#方法一：使用bat" class="headerlink" title="方法一：使用bat"></a>方法一：使用bat</h2><ol>
 <li><p>win+R： <code>shell:startup</code>,打开的路径所存放的软件电脑在开机的时候会自动运行。</p>
 </li>
@@ -166,7 +166,7 @@ <h1 id="出现的问题"><a href="#出现的问题" class="headerlink" title="
 <h2 id="解决方法："><a href="#解决方法：" class="headerlink" title="解决方法："></a>解决方法：</h2><ol>
 <li><p>win+R,键入<strong>gpedit.msc</strong></p>
 </li>
-<li><p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656848388974gly.png" alt="管理员权限"></p>
+<li><p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656848388974gly.png" alt="管理员权限"></p>
 </li>
 <li><p>已启动了换已禁用，已禁用了换已启用试试，然后重启。(ps:其实我是没效果的)</p>
 </li>
@@ -189,7 +189,7 @@ <h2 id="一些有意思的脚本代码："><a href="#一些有意思的脚本代
 <li>打开无数个计算器（慎用）</li>
 </ol>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//会死机!!!</span></span><br><span class="line">set wsh=<span class="title function_">createobject</span>(<span class="string">&quot;wscript.shell&quot;</span>) </span><br><span class="line"><span class="keyword">do</span> </span><br><span class="line">wsh.<span class="property">run</span> <span class="string">&quot;calc&quot;</span> </span><br><span class="line">loop </span><br></pre></td></tr></table></figure>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/ee7734c7.html">https://fsllala.top/articles/ee7734c7.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/bat/">bat</a><a class="post-meta__tags" href="/tags/vbs/">vbs</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_27.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/4c664111.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_13.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">PhotoShop</div></div></a></div><div class="next-post pull-right"><a href="/articles/957893b.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">异步处理</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%83%8C%E6%99%AF"><span class="toc-number">1.</span> <span class="toc-text">背景</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%AD%A5%E9%AA%A4"><span class="toc-number">2.</span> <span class="toc-text">步骤</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%B8%80%EF%BC%9A%E4%BD%BF%E7%94%A8bat"><span class="toc-number">2.1.</span> <span class="toc-text">方法一：使用bat</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%BA%8C%EF%BC%9A%E4%BD%BF%E7%94%A8vbs"><span class="toc-number">2.2.</span> <span class="toc-text">方法二：使用vbs</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">3.</span> <span class="toc-text">出现的问题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95%EF%BC%9A"><span class="toc-number">3.1.</span> <span class="toc-text">解决方法：</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#vbs%E6%8B%93%E5%B1%95"><span class="toc-number">4.</span> <span class="toc-text">vbs拓展</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%E4%BA%9B%E6%9C%89%E6%84%8F%E6%80%9D%E7%9A%84%E8%84%9A%E6%9C%AC%E4%BB%A3%E7%A0%81%EF%BC%9A"><span class="toc-number">4.1.</span> <span class="toc-text">一些有意思的脚本代码：</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/ee7734c7.html">https://fsllala.top/articles/ee7734c7.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/bat/">bat</a><a class="post-meta__tags" href="/tags/vbs/">vbs</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_27.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/4c664111.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_13.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">PhotoShop</div></div></a></div><div class="next-post pull-right"><a href="/articles/957893b.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_34.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">异步处理</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%83%8C%E6%99%AF"><span class="toc-number">1.</span> <span class="toc-text">背景</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%AD%A5%E9%AA%A4"><span class="toc-number">2.</span> <span class="toc-text">步骤</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%B8%80%EF%BC%9A%E4%BD%BF%E7%94%A8bat"><span class="toc-number">2.1.</span> <span class="toc-text">方法一：使用bat</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%BA%8C%EF%BC%9A%E4%BD%BF%E7%94%A8vbs"><span class="toc-number">2.2.</span> <span class="toc-text">方法二：使用vbs</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">3.</span> <span class="toc-text">出现的问题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95%EF%BC%9A"><span class="toc-number">3.1.</span> <span class="toc-text">解决方法：</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#vbs%E6%8B%93%E5%B1%95"><span class="toc-number">4.</span> <span class="toc-text">vbs拓展</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%E4%BA%9B%E6%9C%89%E6%84%8F%E6%80%9D%E7%9A%84%E8%84%9A%E6%9C%AC%E4%BB%A3%E7%A0%81%EF%BC%9A"><span class="toc-number">4.1.</span> <span class="toc-text">一些有意思的脚本代码：</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/ef0a4464.html b/articles/ef0a4464.html
index b86659e5..221f9bb5 100644
--- a/articles/ef0a4464.html
+++ b/articles/ef0a4464.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:39:31'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_33.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">拖拽</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:39:31.382Z" title="更新于 2024-02-26 19:39:31">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E6%8B%96%E6%8B%BD/">拖拽</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>7分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="拖拽"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="拖拽"><a href="#拖拽" class="headerlink" title="拖拽"></a>拖拽</h1><h2 id="位置信息"><a href="#位置信息" class="headerlink" title="位置信息"></a>位置信息</h2><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_33.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">拖拽</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.883Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E6%8B%96%E6%8B%BD/">拖拽</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>7分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="拖拽"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="拖拽"><a href="#拖拽" class="headerlink" title="拖拽"></a>拖拽</h1><h2 id="位置信息"><a href="#位置信息" class="headerlink" title="位置信息"></a>位置信息</h2><ul>
 <li>clientX &#x2F; clientY       获取距离可视区域的距离；</li>
 <li>pageX &#x2F; pageY        获取距离文档的（没有滚动条的时候与client一样）；</li>
 <li>screenX &#x2F; screenY  获取距离屏幕 （指的电脑屏幕）；</li>
@@ -146,11 +146,11 @@ <h2 id="拖拽涉及到的事件"><a href="#拖拽涉及到的事件" class="hea
 <h2 id="拖拽的实现"><a href="#拖拽的实现" class="headerlink" title="拖拽的实现"></a>拖拽的实现</h2><ol>
 <li>找到一个固定值(不变的点)&#x3D;&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)。</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656848441915tz.png" alt="不变的坐标"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656848441915tz.png" alt="不变的坐标"></p>
 <ol start="2">
 <li>获取拖拽后元素距离body的距离 (offset不行)</li>
 </ol>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656848491916tz2.png" alt="拖拽"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656848491916tz2.png" alt="拖拽"></p>
 <h2 id="第一版代码"><a href="#第一版代码" class="headerlink" title="第一版代码"></a>第一版代码</h2><figure class="highlight css"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line">    * &#123;</span><br><span class="line">        <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.box</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">        <span class="attribute">background-color</span>: red;</span><br><span class="line">        <span class="attribute">position</span>: absolute;</span><br><span class="line">        <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
 
 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
@@ -176,7 +176,7 @@ <h2 id="最终代码"><a href="#最终代码" class="headerlink" title="最终
 
 <h2 id="拖拽自动回放"><a href="#拖拽自动回放" class="headerlink" title="拖拽自动回放"></a>拖拽自动回放</h2><p>设置一个数组用来存放坐标，每次通过pop()将末尾的值赋值给拖拽元素。</p>
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">/*</span></span><br><span class="line"><span class="comment"> 拖拽一共三个状态 ：</span></span><br><span class="line"><span class="comment"> 1.按下：onmousedown</span></span><br><span class="line"><span class="comment"> 2.移动：onmousemove</span></span><br><span class="line"><span class="comment"> 3.抬起：onmouseup</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"> <span class="comment">// 找到一个固定值(不变的点)=&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)</span></span><br><span class="line"> <span class="keyword">var</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">var</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;btn&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 设置一个数组存数值;</span></span><br><span class="line"> <span class="keyword">var</span> stepArr = []</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 1.鼠标按下</span></span><br><span class="line"> box.<span class="property">onmousedown</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">     <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">     ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">     <span class="comment">//存放初始值</span></span><br><span class="line">     stepArr.<span class="title function_">push</span>(&#123;</span><br><span class="line">         <span class="attr">left</span>: <span class="built_in">parseFloat</span>(<span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(box).<span class="property">left</span>),</span><br><span class="line">         <span class="attr">top</span>: <span class="built_in">parseFloat</span>(<span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(box).<span class="property">top</span>)</span><br><span class="line">     &#125;)</span><br><span class="line">     <span class="comment">// 阻止默认行为</span></span><br><span class="line">     ev.<span class="property">preventDafault</span>?ev.<span class="title function_">preventDafault</span>():ev.<span class="property">returnValue</span>=<span class="literal">false</span>;</span><br><span class="line">     <span class="comment">// 获取鼠标距离拖拽元素的距离</span></span><br><span class="line">     <span class="keyword">var</span> x = ev.<span class="property">clientX</span> - box.<span class="property">offsetLeft</span>;</span><br><span class="line">     <span class="keyword">var</span> y = ev.<span class="property">clientY</span> - box.<span class="property">offsetTop</span>;</span><br><span class="line"></span><br><span class="line">     <span class="comment">// 2.鼠标移动事件  肯定在鼠标按下事件里面</span></span><br><span class="line">     <span class="variable language_">document</span>.<span class="property">onmousemove</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">         <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">         ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">         <span class="comment">// 确定box的位置</span></span><br><span class="line">         <span class="keyword">var</span> left = ev.<span class="property">clientX</span> - x;</span><br><span class="line">         <span class="keyword">var</span> top = ev.<span class="property">clientY</span> - y;</span><br><span class="line">         <span class="comment">// 边界判断</span></span><br><span class="line">         <span class="keyword">var</span> minLeft = <span class="number">0</span>,</span><br><span class="line">             maxLeft = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientWidth</span> - box.<span class="property">clientWidth</span>;</span><br><span class="line">         <span class="keyword">var</span> minTop = <span class="number">0</span>,</span><br><span class="line">             maxTop = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span> - box.<span class="property">clientHeight</span>;</span><br><span class="line">         <span class="keyword">if</span> (left &lt;= minLeft) &#123;</span><br><span class="line">             left = minLeft;</span><br><span class="line">         &#125; <span class="keyword">else</span> <span class="keyword">if</span> (left &gt;= maxLeft) &#123;</span><br><span class="line">             left = maxLeft;</span><br><span class="line">         &#125;</span><br><span class="line">         <span class="keyword">if</span> (top &lt;= minTop) &#123;</span><br><span class="line">             top = minTop;</span><br><span class="line">         &#125; <span class="keyword">else</span> <span class="keyword">if</span> (top &gt;= maxTop) &#123;</span><br><span class="line">             top = maxTop;</span><br><span class="line">         &#125;</span><br><span class="line">         <span class="comment">// 设置(得设置绝对定位)</span></span><br><span class="line">         box.<span class="property">style</span>.<span class="property">left</span> = left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">         box.<span class="property">style</span>.<span class="property">top</span> = top + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">         <span class="comment">// 添加移动的坐标</span></span><br><span class="line">         stepArr.<span class="title function_">push</span>(&#123; <span class="string">&quot;left&quot;</span>: left &#125;, &#123; <span class="string">&quot;top&quot;</span>: top &#125;)</span><br><span class="line">     &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">//  3.鼠标抬起(可以在鼠标按下里面,也可以不在里面)</span></span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">onmouseup</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">     <span class="comment">// 移除鼠标的移动事件;  因为抬起了鼠标还可以移动</span></span><br><span class="line">     <span class="variable language_">document</span>.<span class="property">onmousemove</span> = <span class="literal">null</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> btn.<span class="property">onclick</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">     <span class="comment">// 防止多次点击,先清除定时器</span></span><br><span class="line">     <span class="variable language_">window</span>.<span class="built_in">clearInterval</span>(<span class="variable language_">this</span>.<span class="property">timer</span>);</span><br><span class="line">     <span class="keyword">var</span> that = <span class="variable language_">this</span>;</span><br><span class="line">     <span class="comment">// 设置定时器(自定义属性)</span></span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">timer</span> = <span class="variable language_">window</span>.<span class="built_in">setInterval</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">         <span class="comment">// 拿取末尾的值;原来的数组会改变;</span></span><br><span class="line">         <span class="keyword">var</span> curStep = stepArr.<span class="title function_">pop</span>();</span><br><span class="line">         <span class="keyword">if</span> (stepArr.<span class="property">length</span> &lt;= <span class="number">0</span>) &#123;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">left</span> = curStep.<span class="property">left</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">top</span> = curStep.<span class="property">top</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">             <span class="comment">// 清除定时器</span></span><br><span class="line">             <span class="variable language_">window</span>.<span class="built_in">clearInterval</span>(that.<span class="property">timer</span>);</span><br><span class="line">         &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">left</span> = curStep.<span class="property">left</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">top</span> = curStep.<span class="property">top</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">         &#125;</span><br><span class="line">     &#125;, <span class="number">10</span>)</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/ef0a4464.html">https://fsllala.top/articles/ef0a4464.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%8B%96%E6%8B%BD/">拖拽</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_33.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/3d72a2c2.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_30.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">懒加载</div></div></a></div><div class="next-post pull-right"><a href="/articles/df38ec5a.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">EventLoop</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8B%96%E6%8B%BD"><span class="toc-number">1.</span> <span class="toc-text">拖拽</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%8D%E7%BD%AE%E4%BF%A1%E6%81%AF"><span class="toc-number">1.1.</span> <span class="toc-text">位置信息</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8B%96%E6%8B%BD%E6%B6%89%E5%8F%8A%E5%88%B0%E7%9A%84%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.2.</span> <span class="toc-text">拖拽涉及到的事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8B%96%E6%8B%BD%E7%9A%84%E5%AE%9E%E7%8E%B0"><span class="toc-number">1.3.</span> <span class="toc-text">拖拽的实现</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AC%AC%E4%B8%80%E7%89%88%E4%BB%A3%E7%A0%81"><span class="toc-number">1.4.</span> <span class="toc-text">第一版代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AC%AC%E4%BA%8C%E7%89%88%E4%BB%A3%E7%A0%81"><span class="toc-number">1.5.</span> <span class="toc-text">第二版代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AC%AC%E4%B8%89%E7%89%88%E4%BB%A3%E7%A0%81"><span class="toc-number">1.6.</span> <span class="toc-text">第三版代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%80%E7%BB%88%E4%BB%A3%E7%A0%81"><span class="toc-number">1.7.</span> <span class="toc-text">最终代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8B%96%E6%8B%BD%E8%87%AA%E5%8A%A8%E5%9B%9E%E6%94%BE"><span class="toc-number">1.8.</span> <span class="toc-text">拖拽自动回放</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/ef0a4464.html">https://fsllala.top/articles/ef0a4464.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%8B%96%E6%8B%BD/">拖拽</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_33.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/3d72a2c2.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_30.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">懒加载</div></div></a></div><div class="next-post pull-right"><a href="/articles/df38ec5a.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_3.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">EventLoop</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8B%96%E6%8B%BD"><span class="toc-number">1.</span> <span class="toc-text">拖拽</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%8D%E7%BD%AE%E4%BF%A1%E6%81%AF"><span class="toc-number">1.1.</span> <span class="toc-text">位置信息</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8B%96%E6%8B%BD%E6%B6%89%E5%8F%8A%E5%88%B0%E7%9A%84%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.2.</span> <span class="toc-text">拖拽涉及到的事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8B%96%E6%8B%BD%E7%9A%84%E5%AE%9E%E7%8E%B0"><span class="toc-number">1.3.</span> <span class="toc-text">拖拽的实现</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AC%AC%E4%B8%80%E7%89%88%E4%BB%A3%E7%A0%81"><span class="toc-number">1.4.</span> <span class="toc-text">第一版代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AC%AC%E4%BA%8C%E7%89%88%E4%BB%A3%E7%A0%81"><span class="toc-number">1.5.</span> <span class="toc-text">第二版代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AC%AC%E4%B8%89%E7%89%88%E4%BB%A3%E7%A0%81"><span class="toc-number">1.6.</span> <span class="toc-text">第三版代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%80%E7%BB%88%E4%BB%A3%E7%A0%81"><span class="toc-number">1.7.</span> <span class="toc-text">最终代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8B%96%E6%8B%BD%E8%87%AA%E5%8A%A8%E5%9B%9E%E6%94%BE"><span class="toc-number">1.8.</span> <span class="toc-text">拖拽自动回放</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/f2866b73.html b/articles/f2866b73.html
index 6b5145f6..a1320625 100644
--- a/articles/f2866b73.html
+++ b/articles/f2866b73.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:37:37'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">箭头函数</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:37:37.468Z" title="更新于 2024-02-26 19:37:37">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">箭头函数</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>6分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="箭头函数"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h1><h2 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h2><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_39.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">箭头函数</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.878Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">箭头函数</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>6分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="箭头函数"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h1><h2 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h2><blockquote>
 <p>箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁</p>
 </blockquote>
 <ul>
@@ -237,7 +237,7 @@ <h2 id="箭头函数this指向"><a href="#箭头函数this指向" class="headerl
 
 <p>整体代码：</p>
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 网络请求的工具函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">request</span>(<span class="params">url, callbackFn</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> arrs = [<span class="string">&quot;fsl&quot;</span>, <span class="string">&quot;fsllala&quot;</span>, <span class="string">&#x27;forward&#x27;</span>];</span><br><span class="line">    <span class="title function_">callbackFn</span>(arrs);  <span class="comment">//回调函数</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 实际操作的位置(业务)</span></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">names</span>: [],</span><br><span class="line">    <span class="attr">network</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="title function_">request</span>(<span class="string">&quot;/namesArr&quot;</span>, <span class="function">(<span class="params">params</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// obj</span></span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">names</span> = [...params];</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.<span class="title function_">network</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);</span><br><span class="line"><span class="comment">/*分析:</span></span><br><span class="line"><span class="comment">    (params)=&gt;&#123;&#125;中的this 指向:</span></span><br><span class="line"><span class="comment">        箭头函数,查找上级作用域的this; 上级作用域是普通函数,看函数调用;obj.network(),所以this指向obj</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/f2866b73.html">https://fsllala.top/articles/f2866b73.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/JS/">JS</a><a class="post-meta__tags" href="/tags/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">箭头函数</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/feee8227.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_14.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">this</div></div></a></div><div class="next-post pull-right"><a href="/articles/31c1f94e.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">预解析</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/f7f97ed.html" title="文件下载"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-08-07</div><div class="title">文件下载</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-number">1.</span> <span class="toc-text">箭头函数</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89"><span class="toc-number">1.1.</span> <span class="toc-text">定义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%92%8C%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0%E5%AF%B9%E6%AF%94"><span class="toc-number">1.2.</span> <span class="toc-text">和普通函数对比</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0"><span class="toc-number">1.2.1.</span> <span class="toc-text">普通函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0-1"><span class="toc-number">1.2.2.</span> <span class="toc-text">箭头函数</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%AE%80%E5%86%99"><span class="toc-number">1.3.</span> <span class="toc-text">箭头函数简写</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0this%E6%8C%87%E5%90%91"><span class="toc-number">1.4.</span> <span class="toc-text">箭头函数this指向</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/f2866b73.html">https://fsllala.top/articles/f2866b73.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/JS/">JS</a><a class="post-meta__tags" href="/tags/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">箭头函数</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_39.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/feee8227.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_14.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">this</div></div></a></div><div class="next-post pull-right"><a href="/articles/31c1f94e.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">预解析</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/f7f97ed.html" title="文件下载"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-08-07</div><div class="title">文件下载</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-number">1.</span> <span class="toc-text">箭头函数</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89"><span class="toc-number">1.1.</span> <span class="toc-text">定义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%92%8C%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0%E5%AF%B9%E6%AF%94"><span class="toc-number">1.2.</span> <span class="toc-text">和普通函数对比</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0"><span class="toc-number">1.2.1.</span> <span class="toc-text">普通函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0-1"><span class="toc-number">1.2.2.</span> <span class="toc-text">箭头函数</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%AE%80%E5%86%99"><span class="toc-number">1.3.</span> <span class="toc-text">箭头函数简写</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0this%E6%8C%87%E5%90%91"><span class="toc-number">1.4.</span> <span class="toc-text">箭头函数this指向</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/f6275dee.html b/articles/f6275dee.html
index 52c9914d..4157e6dc 100644
--- a/articles/f6275dee.html
+++ b/articles/f6275dee.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:35:27'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,36 +133,36 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_15.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">JSON.stringify 深拷贝弊端</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:35:27.912Z" title="更新于 2024-02-26 19:35:27">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/">JSON.stringify 深拷贝弊端</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">867</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>3分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="JSON.stringify 深拷贝弊端"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="JSON-stringify-深拷贝的弊端"><a href="#JSON-stringify-深拷贝的弊端" class="headerlink" title="JSON.stringify 深拷贝的弊端"></a>JSON.stringify 深拷贝的弊端</h1><h2 id="时间对象"><a href="#时间对象" class="headerlink" title="时间对象"></a>时间对象</h2><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_15.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">JSON.stringify 深拷贝弊端</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/">JSON.stringify 深拷贝弊端</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">867</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>3分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="JSON.stringify 深拷贝弊端"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="JSON-stringify-深拷贝的弊端"><a href="#JSON-stringify-深拷贝的弊端" class="headerlink" title="JSON.stringify 深拷贝的弊端"></a>JSON.stringify 深拷贝的弊端</h1><h2 id="时间对象"><a href="#时间对象" class="headerlink" title="时间对象"></a>时间对象</h2><blockquote>
 <p>如果 obj 里面有时间对象，则 JSON.stringify 后再 JSON.parse 的结果，时间将转为<strong>字符串</strong>的形式，而不是<strong>对象</strong>的形式</p>
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:[<span class="keyword">new</span> <span class="title class_">Date</span>(),<span class="keyword">new</span> <span class="title class_">Date</span>()]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675493820079.png" alt="stringify"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1675493820079.png" alt="stringify"></p>
 <h2 id="RegExp-、Error"><a href="#RegExp-、Error" class="headerlink" title="RegExp 、Error"></a>RegExp 、Error</h2><blockquote>
 <p>如果 obj 里有 RegExp (正则表达式的缩写)、Error 对象，则序列化的结果将只得到空对象；</p>
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="regexp">/aabb[a-z]\d/</span>,</span><br><span class="line">    <span class="attr">c</span>:<span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;typeError&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675493731487.png" alt="stringfy"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1675493731487.png" alt="stringfy"></p>
 <h2 id="function、undefined、Symbol"><a href="#function、undefined、Symbol" class="headerlink" title="function、undefined、Symbol"></a>function、undefined、Symbol</h2><blockquote>
 <p>如果 obj 里有函数（function），undefined，Symbol 则序列化的结果会把 function 、 undefined 、Symbol 丢失；</p>
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">fn</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;<span class="keyword">let</span> a = <span class="number">123</span>;<span class="variable language_">console</span>.<span class="title function_">log</span>(a)&#125;,</span><br><span class="line">    <span class="attr">c</span>:<span class="literal">undefined</span>,</span><br><span class="line">    <span class="attr">d</span>:<span class="title class_">Symbol</span>(<span class="string">&#x27;foo&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675493621131.png" alt="stringfy"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1675493621131.png" alt="stringfy"></p>
 <blockquote>
 <p>如果 Array里有函数（function），undefined，Symbol 则序列化的结果会把 function 、 undefined 、Symbol 转为null；(占位用)</p>
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>: [<span class="keyword">function</span> (<span class="params"></span>) &#123; <span class="keyword">let</span> a = <span class="number">123</span>; <span class="variable language_">console</span>.<span class="title function_">log</span>(a) &#125;, <span class="literal">undefined</span>, <span class="title class_">Symbol</span>(<span class="string">&#x27;foo&#x27;</span>)]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj, newObj);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675493491371.png" alt="stringfy"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1675493491371.png" alt="stringfy"></p>
 <h2 id="NaN、Infinity-、-Infinity"><a href="#NaN、Infinity-、-Infinity" class="headerlink" title="NaN、Infinity 、-Infinity"></a>NaN、Infinity 、-Infinity</h2><blockquote>
 <p>如果obj里有 NaN、Infinity 和 -Infinity，则序列化的结果会变成 null</p>
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="title class_">NaN</span>,</span><br><span class="line">    <span class="attr">c</span>:<span class="title class_">Infinity</span>,</span><br><span class="line">    <span class="attr">d</span>:-<span class="title class_">Infinity</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675493981952.png" alt="stringfy"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1675493981952.png" alt="stringfy"></p>
 <h2 id="枚举"><a href="#枚举" class="headerlink" title="枚举"></a>枚举</h2><ul>
 <li>构造函数</li>
 </ul>
@@ -171,13 +171,13 @@ <h2 id="枚举"><a href="#枚举" class="headerlink" title="枚举"></a>枚举</
 </blockquote>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Student</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">a</span> = <span class="number">1</span>;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">b</span> = <span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="keyword">new</span> <span class="title class_">Student</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675494072860.png" alt="stringfy"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1675494072860.png" alt="stringfy"></p>
 <ul>
 <li>通过<code>Object.defineProperty</code>手动设置某属性不可枚举：</li>
 </ul>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="number">234</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(obj,<span class="string">&#x27;c&#x27;</span>,&#123;</span><br><span class="line">    <span class="attr">value</span>:<span class="number">22</span>,</span><br><span class="line">    <span class="attr">enumerable</span>:<span class="literal">false</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675494167827.png" alt="stringfy"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1675494167827.png" alt="stringfy"></p>
 <h1 id="弊端总结"><a href="#弊端总结" class="headerlink" title="弊端总结"></a>弊端总结</h1><blockquote>
 <p>用法简单，然而使用这种方法会有一些隐藏的坑：因为在序列化 JavaScript 对象时，所有函数和原型成员会被有意忽略；</p>
 <p>通俗点说，JSON.parse(JSON.stringfy(X))，其中 X 只能是 Number, String, Boolean, Array,扁平对象，即那些能够被 JSON 直接表示的数据结构。</p>
@@ -218,7 +218,7 @@ <h2 id="缓存"><a href="#缓存" class="headerlink" title="缓存"></a>缓存</
 <figure class="highlight js"><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"><span class="keyword">let</span> arr = [<span class="number">12</span>,<span class="number">12</span>,<span class="number">12</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr),arr.<span class="title function_">toString</span>());</span><br><span class="line"><span class="comment">//[12,12,12] 12,12,12</span></span><br></pre></td></tr></table></figure>
 
 <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a target="_blank" rel="noopener" href="https://blog.csdn.net/MFWSCQ/article/details/112977766">利用 JSON.stringify 深拷贝的弊端</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/f6275dee.html">https://fsllala.top/articles/f6275dee.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/">深拷贝</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_15.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/e98504f5.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_28.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">深浅拷贝</div></div></a></div><div class="next-post pull-right"><a href="/articles/f7f97ed.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">文件下载</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E7%9A%84%E5%BC%8A%E7%AB%AF"><span class="toc-number">1.</span> <span class="toc-text">JSON.stringify 深拷贝的弊端</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%B6%E9%97%B4%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.1.</span> <span class="toc-text">时间对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#RegExp-%E3%80%81Error"><span class="toc-number">1.2.</span> <span class="toc-text">RegExp 、Error</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#function%E3%80%81undefined%E3%80%81Symbol"><span class="toc-number">1.3.</span> <span class="toc-text">function、undefined、Symbol</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NaN%E3%80%81Infinity-%E3%80%81-Infinity"><span class="toc-number">1.4.</span> <span class="toc-text">NaN、Infinity 、-Infinity</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9E%9A%E4%B8%BE"><span class="toc-number">1.5.</span> <span class="toc-text">枚举</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BC%8A%E7%AB%AF%E6%80%BB%E7%BB%93"><span class="toc-number">2.</span> <span class="toc-text">弊端总结</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#JSON-stringify-%E5%B8%B8%E7%94%A8%E6%96%B9%E5%BC%8F"><span class="toc-number">3.</span> <span class="toc-text">JSON.stringify() 常用方式</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E7%9B%B8%E7%AD%89"><span class="toc-number">3.1.</span> <span class="toc-text">判断是否相等</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%93%E5%AD%98"><span class="toc-number">3.2.</span> <span class="toc-text">缓存</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">4.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/f6275dee.html">https://fsllala.top/articles/f6275dee.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/">深拷贝</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_15.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/e98504f5.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_28.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">深浅拷贝</div></div></a></div><div class="next-post pull-right"><a href="/articles/f7f97ed.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">文件下载</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E7%9A%84%E5%BC%8A%E7%AB%AF"><span class="toc-number">1.</span> <span class="toc-text">JSON.stringify 深拷贝的弊端</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%B6%E9%97%B4%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.1.</span> <span class="toc-text">时间对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#RegExp-%E3%80%81Error"><span class="toc-number">1.2.</span> <span class="toc-text">RegExp 、Error</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#function%E3%80%81undefined%E3%80%81Symbol"><span class="toc-number">1.3.</span> <span class="toc-text">function、undefined、Symbol</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NaN%E3%80%81Infinity-%E3%80%81-Infinity"><span class="toc-number">1.4.</span> <span class="toc-text">NaN、Infinity 、-Infinity</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9E%9A%E4%B8%BE"><span class="toc-number">1.5.</span> <span class="toc-text">枚举</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BC%8A%E7%AB%AF%E6%80%BB%E7%BB%93"><span class="toc-number">2.</span> <span class="toc-text">弊端总结</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#JSON-stringify-%E5%B8%B8%E7%94%A8%E6%96%B9%E5%BC%8F"><span class="toc-number">3.</span> <span class="toc-text">JSON.stringify() 常用方式</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E7%9B%B8%E7%AD%89"><span class="toc-number">3.1.</span> <span class="toc-text">判断是否相等</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%93%E5%AD%98"><span class="toc-number">3.2.</span> <span class="toc-text">缓存</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">4.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/f7f97ed.html b/articles/f7f97ed.html
index 40f55411..9856b2a3 100644
--- a/articles/f7f97ed.html
+++ b/articles/f7f97ed.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:32:47'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">文件下载</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:32:47.431Z" title="更新于 2024-02-26 19:32:47">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/Blob/">Blob</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/">文件下载</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="文件下载"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="文件下载方式"><a href="#文件下载方式" class="headerlink" title="文件下载方式"></a>文件下载方式</h1><blockquote>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_38.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">文件下载</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.898Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/Blob/">Blob</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/">文件下载</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="文件下载"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="文件下载方式"><a href="#文件下载方式" class="headerlink" title="文件下载方式"></a>文件下载方式</h1><blockquote>
 <p>前端涉及到的文件下载还是很多应用场景的，那么前端文件下载有多少种方式呢？每种方式有什么优缺点呢？下面就来一一介绍。</p>
 </blockquote>
 <h2 id="a标签"><a href="#a标签" class="headerlink" title="a标签"></a>a标签</h2><h3 id="定义与用法"><a href="#定义与用法" class="headerlink" title="定义与用法"></a>定义与用法</h3><ul>
@@ -152,7 +152,7 @@ <h3 id="兼容性测试及结果"><a href="#兼容性测试及结果" class="hea
 <ul>
 <li>pc端浏览器兼容性</li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/download1675772980006.PNG" alt="download"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/download1675772980006.PNG" alt="download"></p>
 <h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul>
 <li>html不支持的文件，无论同源还是不同源，有没有download属性，都会下载。</li>
 <li>html支持的文件，同源且有download属性，除ie外都会下载。</li>
@@ -161,7 +161,7 @@ <h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</
 <h2 id="Blob对象"><a href="#Blob对象" class="headerlink" title="Blob对象"></a>Blob对象</h2><blockquote>
 <p>场景：后端返回给前端<code>文件流</code>，前端通过<code>Blob</code>下载；文件流格式如下：</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/download1675766421440.png" alt="export"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/download1675766421440.png" alt="export"></p>
 <h3 id="Blob对象-1"><a href="#Blob对象-1" class="headerlink" title="Blob对象"></a>Blob对象</h3><p>下面是<code>blob</code>对象的定义，来自<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob">MDN</a>：</p>
 <blockquote>
 <p><code>Blob</code>对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 <code>ReadableStream</code> 来用于数据操作。</p>
@@ -189,7 +189,7 @@ <h3 id="下载文件流"><a href="#下载文件流" class="headerlink" title="
 <h4 id="响应头headers获取文件信息"><a href="#响应头headers获取文件信息" class="headerlink" title="响应头headers获取文件信息"></a>响应头<code>headers</code>获取文件信息</h4><blockquote>
 <p>在响应数据<code>response.headers[&quot;content-disposition&quot;]</code>中获取文件信息；包含<strong>文件名</strong>和<strong>文件类型</strong>；如下图所示：</p>
 </blockquote>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/download21675767199385.png" alt="download"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/download21675767199385.png" alt="download"></p>
 <p>可以在响应拦截器里面做数据处理：</p>
 <ul>
 <li>中文转码了，转回去；</li>
@@ -202,7 +202,7 @@ <h4 id="调用下载接口"><a href="#调用下载接口" class="headerlink" tit
 </ul>
 <figure class="highlight plaintext"><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">getMeetRoomExport(this.exportParams).then((res) =&gt; &#123;</span><br><span class="line">	console.log(res);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/download31675768232608.png" alt="download"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/download31675768232608.png" alt="download"></p>
 <ul>
 <li>接口请求</li>
 </ul>
@@ -247,7 +247,7 @@ <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/ShinyRuo_/article/details/122165573">下载出来文件内容为空的解决方法</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_42912237/article/details/122063752?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-122063752-blog-122165573.pc_relevant_aa2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-122063752-blog-122165573.pc_relevant_aa2&utm_relevant_index=10">前端解析后端文件流并下载</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/Rainy_X/article/details/112610150?spm=1001.2014.3001.5502">js实现前端下载文件</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/f7f97ed.html">https://fsllala.top/articles/f7f97ed.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/JS/">JS</a><a class="post-meta__tags" href="/tags/Blob/">Blob</a><a class="post-meta__tags" href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/">文件下载</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/f6275dee.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_15.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">JSON.stringify 深拷贝弊端</div></div></a></div><div class="next-post pull-right"><a href="/articles/7cf6476b.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">nvm、npm与nrm</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/f2866b73.html" title="箭头函数"><img class="cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-01-24</div><div class="title">箭头函数</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD%E6%96%B9%E5%BC%8F"><span class="toc-number">1.</span> <span class="toc-text">文件下载方式</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#a%E6%A0%87%E7%AD%BE"><span class="toc-number">1.1.</span> <span class="toc-text">a标签</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89%E4%B8%8E%E7%94%A8%E6%B3%95"><span class="toc-number">1.1.1.</span> <span class="toc-text">定义与用法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%BC%E5%AE%B9%E6%80%A7%E6%B5%8B%E8%AF%95%E5%8F%8A%E7%BB%93%E6%9E%9C"><span class="toc-number">1.1.2.</span> <span class="toc-text">兼容性测试及结果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">1.1.3.</span> <span class="toc-text">总结</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Blob%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.2.</span> <span class="toc-text">Blob对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Blob%E5%AF%B9%E8%B1%A1-1"><span class="toc-number">1.2.1.</span> <span class="toc-text">Blob对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#URL-createObjectURL"><span class="toc-number">1.2.2.</span> <span class="toc-text">URL.createObjectURL</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8B%E8%BD%BD%E6%96%87%E4%BB%B6%E6%B5%81"><span class="toc-number">1.2.3.</span> <span class="toc-text">下载文件流</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8C%87%E5%AE%9A%E8%BF%94%E5%9B%9E%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F"><span class="toc-number">1.2.3.1.</span> <span class="toc-text">指定返回数据格式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E5%A4%B4headers%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E4%BF%A1%E6%81%AF"><span class="toc-number">1.2.3.2.</span> <span class="toc-text">响应头headers获取文件信息</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B0%83%E7%94%A8%E4%B8%8B%E8%BD%BD%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.2.3.3.</span> <span class="toc-text">调用下载接口</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8B%E8%BD%BD%E6%8B%93%E5%B1%95"><span class="toc-number">1.2.4.</span> <span class="toc-text">下载拓展</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9E%9A%E4%B8%BE%E6%96%B9%E5%BC%8F"><span class="toc-number">1.2.4.1.</span> <span class="toc-text">枚举方式</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Blob%E6%8B%93%E5%B1%95"><span class="toc-number">1.2.5.</span> <span class="toc-text">Blob拓展</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#URL-createObjectURL%E6%8B%93%E5%B1%95"><span class="toc-number">1.2.6.</span> <span class="toc-text">URL.createObjectURL拓展</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">2.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/f7f97ed.html">https://fsllala.top/articles/f7f97ed.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/JS/">JS</a><a class="post-meta__tags" href="/tags/Blob/">Blob</a><a class="post-meta__tags" href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/">文件下载</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_38.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/f6275dee.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_15.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">JSON.stringify 深拷贝弊端</div></div></a></div><div class="next-post pull-right"><a href="/articles/7cf6476b.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">nvm、npm与nrm</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/articles/f2866b73.html" title="箭头函数"><img class="cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_39.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-01-24</div><div class="title">箭头函数</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD%E6%96%B9%E5%BC%8F"><span class="toc-number">1.</span> <span class="toc-text">文件下载方式</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#a%E6%A0%87%E7%AD%BE"><span class="toc-number">1.1.</span> <span class="toc-text">a标签</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89%E4%B8%8E%E7%94%A8%E6%B3%95"><span class="toc-number">1.1.1.</span> <span class="toc-text">定义与用法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%BC%E5%AE%B9%E6%80%A7%E6%B5%8B%E8%AF%95%E5%8F%8A%E7%BB%93%E6%9E%9C"><span class="toc-number">1.1.2.</span> <span class="toc-text">兼容性测试及结果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">1.1.3.</span> <span class="toc-text">总结</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Blob%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.2.</span> <span class="toc-text">Blob对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Blob%E5%AF%B9%E8%B1%A1-1"><span class="toc-number">1.2.1.</span> <span class="toc-text">Blob对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#URL-createObjectURL"><span class="toc-number">1.2.2.</span> <span class="toc-text">URL.createObjectURL</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8B%E8%BD%BD%E6%96%87%E4%BB%B6%E6%B5%81"><span class="toc-number">1.2.3.</span> <span class="toc-text">下载文件流</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8C%87%E5%AE%9A%E8%BF%94%E5%9B%9E%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F"><span class="toc-number">1.2.3.1.</span> <span class="toc-text">指定返回数据格式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E5%A4%B4headers%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E4%BF%A1%E6%81%AF"><span class="toc-number">1.2.3.2.</span> <span class="toc-text">响应头headers获取文件信息</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B0%83%E7%94%A8%E4%B8%8B%E8%BD%BD%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.2.3.3.</span> <span class="toc-text">调用下载接口</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8B%E8%BD%BD%E6%8B%93%E5%B1%95"><span class="toc-number">1.2.4.</span> <span class="toc-text">下载拓展</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9E%9A%E4%B8%BE%E6%96%B9%E5%BC%8F"><span class="toc-number">1.2.4.1.</span> <span class="toc-text">枚举方式</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Blob%E6%8B%93%E5%B1%95"><span class="toc-number">1.2.5.</span> <span class="toc-text">Blob拓展</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#URL-createObjectURL%E6%8B%93%E5%B1%95"><span class="toc-number">1.2.6.</span> <span class="toc-text">URL.createObjectURL拓展</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">2.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/fa0f2f9c.html b/articles/fa0f2f9c.html
index 71b509e7..5fa8aa17 100644
--- a/articles/fa0f2f9c.html
+++ b/articles/fa0f2f9c.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:39:43'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">网络安全修改</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:39:43.870Z" title="更新于 2024-02-26 19:39:43">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/">网络安全</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5.1k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>17分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="网络安全修改"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2><p>网站做完之后，移交给第三方机构进行安全检测，对”安全功能验证观察报告”指出的问题进行了如下修改；</p>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_57.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">网络安全修改</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.878Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/">网络安全</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5.1k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>17分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="网络安全修改"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2><p>网站做完之后，移交给第三方机构进行安全检测，对”安全功能验证观察报告”指出的问题进行了如下修改；</p>
 <h2 id="接口重放"><a href="#接口重放" class="headerlink" title="接口重放"></a>接口重放</h2><h3 id="什么是重放"><a href="#什么是重放" class="headerlink" title="什么是重放"></a>什么是重放</h3><p>参考文献：<a target="_blank" rel="noopener" href="https://blog.csdn.net/koastal/article/details/53456696?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-53456696-blog-114984526.235%5Ev38%5Epc_relevant_anti_t3_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-53456696-blog-114984526.235%5Ev38%5Epc_relevant_anti_t3_base&utm_relevant_index=4">基于timestamp和nonce的防止重放攻击方案</a></p>
 <blockquote>
 <p>重放攻击指的是攻击者通过发送一个目的主机已接受到的包，来达到欺骗系统的目的。其基本原理就是把窃听到的数据原封不动的重新发送给接收方(好像修改了数据在发送就不叫重放了)，即使传输的数据是加密的，窃听方不知道具体的数据内容，但是容易知道数据的作用（即使不知道作用也能对系统造成一定破坏），这时就能通过原封不动的重新发送达到一定的目的，比如：</p>
@@ -170,7 +170,7 @@ <h3 id="具体方案"><a href="#具体方案" class="headerlink" title="具体
 <li>后端：将解密后的时间戳与本地(服务端)时间做对比，若相差不超过30s则认为请求有效，否则认为请求超时（不返回结果）；</li>
 <li>后端：若时间戳校验通过，则通过redis判断随机数是否在redis中，若不存在则认为请求有效并把随机数保存到redis中，过期时间设置为30s, 若存在则认为请求无效（不返回结果）；</li>
 </ol>
-<h3 id="时序图"><a href="#时序图" class="headerlink" title="时序图"></a>时序图</h3><p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/deReplay.png" alt="nonce"></p>
+<h3 id="时序图"><a href="#时序图" class="headerlink" title="时序图"></a>时序图</h3><p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/deReplay.png" alt="nonce"></p>
 <h3 id="前端代码"><a href="#前端代码" class="headerlink" title="前端代码"></a>前端代码</h3><p>参考文献：<a target="_blank" rel="noopener" href="https://www.jb51.net/javascript/295944dtv.htm">前端利用jsencrypt.js进行RSA加密示例详解</a></p>
 <ol>
 <li><p>这里使用到了RSA加密，需要后端传给前端公钥(我们公司直接后端给的，没有用接口传递)，前端通过jsencrypt加密；</p>
@@ -221,7 +221,7 @@ <h4 id="具体方案-1"><a href="#具体方案-1" class="headerlink" title="具
 <li>这种方法确保了请求体中的所有内容都被包括在摘要计算中，因此即使请求体中的任何部分被篡改，摘要值也会不同，从而使后端能够检测到篡改；</li>
 <li>需要注意的是，这需要前端和后端都遵守相同的摘要算法和相同的计算方法，以便正确验证请求体的完整性。另外，这种方式会增加请求的计算和处理负担，特别是对于大文件的情况；</li>
 </ul>
-<h4 id="时序图-1"><a href="#时序图-1" class="headerlink" title="时序图"></a>时序图</h4><p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/messageZhaiYao.png" alt="zhaiyao"></p>
+<h4 id="时序图-1"><a href="#时序图-1" class="headerlink" title="时序图"></a>时序图</h4><p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/messageZhaiYao.png" alt="zhaiyao"></p>
 <h4 id="基本代码"><a href="#基本代码" class="headerlink" title="基本代码"></a>基本代码</h4><ul>
 <li>安装 crypto-js</li>
 </ul>
@@ -289,7 +289,7 @@ <h2 id="SourceMap"><a href="#SourceMap" class="headerlink" title="SourceMap"></a
 <li>前端环境：webpack，vue&#x2F;cli4.5.15，vue2.6、node16.18.0；</li>
 <li>现象：跟源代码不一致，但是有八分相像；</li>
 </ul>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/sourcemap01.jpg" alt="sourcemap1"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/sourcemap01.jpg" alt="sourcemap1"></p>
 <h3 id="什么是source-map"><a href="#什么是source-map" class="headerlink" title="什么是source map"></a>什么是source map</h3><p>参考文献：<a target="_blank" rel="noopener" href="https://juejin.cn/post/7016510600960278565">一文看懂 webpack 的所有 source map</a> ，<a target="_blank" rel="noopener" href="https://juejin.cn/post/7245536612628971581">什么是SourceMap？webpack devtool超详细解析</a>，<a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/XPqt7NsfItlnBndyQ4Pk-g">Webpack 性能优化</a>；</p>
 <blockquote>
 <p>现代的前端开发总是伴随的各种框架， 在使用这些框架开发的代码需要经过编译才可以在生产环节使用， 编译后就伴随着可读性的降低，也会影响我们的错误调试。 那source map就是为了解决这个问题。</p>
@@ -303,7 +303,7 @@ <h3 id="修改"><a href="#修改" class="headerlink" title="修改"></a>修改</
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">lintOnSave</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">    生产环境设置nosources-source-map(看不到代码,但是报错能看到报错的代码行号);</span></span><br><span class="line"><span class="comment">    研发环境不做处理;</span></span><br><span class="line"><span class="comment">  */</span> </span><br><span class="line">  <span class="attr">configureWebpack</span>:</span><br><span class="line">    process.<span class="property">env</span>.<span class="property">NODE_ENV</span> === <span class="string">&quot;production&quot;</span></span><br><span class="line">      ? &#123;</span><br><span class="line">          <span class="attr">devtool</span>: <span class="string">&quot;nosources-source-map&quot;</span>,</span><br><span class="line">        &#125;</span><br><span class="line">      : &#123;&#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
 
 <p>修改完之后，生产环境现象如下：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/sourcemap02.png" alt="sourcemap2"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/sourcemap02.png" alt="sourcemap2"></p>
 <h2 id="Nginx相关"><a href="#Nginx相关" class="headerlink" title="Nginx相关"></a>Nginx相关</h2><h3 id="TLS低于1-2"><a href="#TLS低于1-2" class="headerlink" title="TLS低于1.2"></a>TLS低于1.2</h3><blockquote>
 <p>网站通过mkcert+nginx生成了https站点(<a href="https://fsllala.top/articles/3ef665a6">详见</a>)，虽然页面上显示使用的是TLS1.3，但是第三方检测机构检测出来同时使用了TLS1.0和1.1，此协议同SSL协议一样，较危险，建议升级到TLS1.2及以上；</p>
 </blockquote>
@@ -317,7 +317,7 @@ <h2 id="Nginx相关"><a href="#Nginx相关" class="headerlink" title="Nginx相
 <li><p>修改nginx：</p>
 <figure class="highlight nginx"><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"><span class="section">server</span> &#123;</span><br><span class="line">  <span class="attribute">ssl_protocols</span> TLSv1.<span class="number">3</span>;  <span class="comment"># 只启用TLS1.3协议版本 (window可以在一行写 1.2 1.3;linux需要写两行ssl_protocol TLSv1.2/3)</span></span><br><span class="line">  <span class="comment"># 其他SSL配置项...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
-<div class="tabs" id="tlschange"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tlschange-1">修改前</button></li><li class="tab"><button type="button" data-href="#tlschange-2">修改后</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tlschange-1"><p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/TLS01.png" alt="nmap1"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tlschange-2"><p><strong><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/TLS02.png" alt="nmap2"></strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div></li>
+<div class="tabs" id="tlschange"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tlschange-1">修改前</button></li><li class="tab"><button type="button" data-href="#tlschange-2">修改后</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tlschange-1"><p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/TLS01.png" alt="nmap1"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tlschange-2"><p><strong><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/TLS02.png" alt="nmap2"></strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div></li>
 </ul>
 <h3 id="ngnix版本号暴露"><a href="#ngnix版本号暴露" class="headerlink" title="ngnix版本号暴露"></a>ngnix版本号暴露</h3><p>修改nginx</p>
 <figure class="highlight nginx"><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"><span class="section">http</span> &#123;</span><br><span class="line">    <span class="attribute">server_tokens</span> <span class="literal">off</span>;</span><br><span class="line">    <span class="comment"># 其他配置...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
@@ -326,7 +326,7 @@ <h3 id="iframe可以嵌套"><a href="#iframe可以嵌套" class="headerlink" tit
 <p>期望：通过iframe不能嵌套该网站；</p>
 </blockquote>
 <figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="section">server</span> &#123;</span><br><span class="line">    <span class="attribute">listen</span> <span class="number">80</span>;</span><br><span class="line">    <span class="attribute">server_name</span> yourdomain.com;</span><br><span class="line"></span><br><span class="line">    <span class="section">location</span> / &#123;</span><br><span class="line">        <span class="attribute">add_header</span> X-Frame-Options <span class="string">&quot;DENY&quot;</span>; <span class="comment"># 加上介个</span></span><br><span class="line">        <span class="comment"># 其他服务器配置...</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/fa0f2f9c.html">https://fsllala.top/articles/fa0f2f9c.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/">网络安全</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/5157567c.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Koa2实战</div></div></a></div><div class="next-post pull-right"><a href="/articles/b9f20a20.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">webpack</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF"><span class="toc-number">1.</span> <span class="toc-text">背景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8E%A5%E5%8F%A3%E9%87%8D%E6%94%BE"><span class="toc-number">2.</span> <span class="toc-text">接口重放</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E9%87%8D%E6%94%BE"><span class="toc-number">2.1.</span> <span class="toc-text">什么是重放</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E9%98%B2%E6%AD%A2%E9%87%8D%E6%94%BE"><span class="toc-number">2.2.</span> <span class="toc-text">如何防止重放</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B7%E4%BD%93%E6%96%B9%E6%A1%88"><span class="toc-number">2.3.</span> <span class="toc-text">具体方案</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%B6%E5%BA%8F%E5%9B%BE"><span class="toc-number">2.4.</span> <span class="toc-text">时序图</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81"><span class="toc-number">2.5.</span> <span class="toc-text">前端代码</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%AE%8C%E6%95%B4%E6%80%A7%E6%A0%A1%E9%AA%8C"><span class="toc-number">3.</span> <span class="toc-text">数据完整性校验</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B6%88%E6%81%AF%E6%91%98%E8%A6%81"><span class="toc-number">3.1.</span> <span class="toc-text">消息摘要</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B7%E4%BD%93%E6%96%B9%E6%A1%88-1"><span class="toc-number">3.1.1.</span> <span class="toc-text">具体方案</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%97%B6%E5%BA%8F%E5%9B%BE-1"><span class="toc-number">3.1.2.</span> <span class="toc-text">时序图</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BB%A3%E7%A0%81"><span class="toc-number">3.1.3.</span> <span class="toc-text">基本代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81-1"><span class="toc-number">3.1.4.</span> <span class="toc-text">前端代码</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SourceMap"><span class="toc-number">4.</span> <span class="toc-text">SourceMap</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFsource-map"><span class="toc-number">4.1.</span> <span class="toc-text">什么是source map</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9"><span class="toc-number">4.2.</span> <span class="toc-text">修改</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Nginx%E7%9B%B8%E5%85%B3"><span class="toc-number">5.</span> <span class="toc-text">Nginx相关</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#TLS%E4%BD%8E%E4%BA%8E1-2"><span class="toc-number">5.1.</span> <span class="toc-text">TLS低于1.2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ngnix%E7%89%88%E6%9C%AC%E5%8F%B7%E6%9A%B4%E9%9C%B2"><span class="toc-number">5.2.</span> <span class="toc-text">ngnix版本号暴露</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#iframe%E5%8F%AF%E4%BB%A5%E5%B5%8C%E5%A5%97"><span class="toc-number">5.3.</span> <span class="toc-text">iframe可以嵌套</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/fa0f2f9c.html">https://fsllala.top/articles/fa0f2f9c.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/">网络安全</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_57.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/5157567c.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Koa2实战</div></div></a></div><div class="next-post pull-right"><a href="/articles/b9f20a20.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">webpack</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF"><span class="toc-number">1.</span> <span class="toc-text">背景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8E%A5%E5%8F%A3%E9%87%8D%E6%94%BE"><span class="toc-number">2.</span> <span class="toc-text">接口重放</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E9%87%8D%E6%94%BE"><span class="toc-number">2.1.</span> <span class="toc-text">什么是重放</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E9%98%B2%E6%AD%A2%E9%87%8D%E6%94%BE"><span class="toc-number">2.2.</span> <span class="toc-text">如何防止重放</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B7%E4%BD%93%E6%96%B9%E6%A1%88"><span class="toc-number">2.3.</span> <span class="toc-text">具体方案</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%B6%E5%BA%8F%E5%9B%BE"><span class="toc-number">2.4.</span> <span class="toc-text">时序图</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81"><span class="toc-number">2.5.</span> <span class="toc-text">前端代码</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%AE%8C%E6%95%B4%E6%80%A7%E6%A0%A1%E9%AA%8C"><span class="toc-number">3.</span> <span class="toc-text">数据完整性校验</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B6%88%E6%81%AF%E6%91%98%E8%A6%81"><span class="toc-number">3.1.</span> <span class="toc-text">消息摘要</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B7%E4%BD%93%E6%96%B9%E6%A1%88-1"><span class="toc-number">3.1.1.</span> <span class="toc-text">具体方案</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%97%B6%E5%BA%8F%E5%9B%BE-1"><span class="toc-number">3.1.2.</span> <span class="toc-text">时序图</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BB%A3%E7%A0%81"><span class="toc-number">3.1.3.</span> <span class="toc-text">基本代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81-1"><span class="toc-number">3.1.4.</span> <span class="toc-text">前端代码</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SourceMap"><span class="toc-number">4.</span> <span class="toc-text">SourceMap</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFsource-map"><span class="toc-number">4.1.</span> <span class="toc-text">什么是source map</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9"><span class="toc-number">4.2.</span> <span class="toc-text">修改</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Nginx%E7%9B%B8%E5%85%B3"><span class="toc-number">5.</span> <span class="toc-text">Nginx相关</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#TLS%E4%BD%8E%E4%BA%8E1-2"><span class="toc-number">5.1.</span> <span class="toc-text">TLS低于1.2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ngnix%E7%89%88%E6%9C%AC%E5%8F%B7%E6%9A%B4%E9%9C%B2"><span class="toc-number">5.2.</span> <span class="toc-text">ngnix版本号暴露</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#iframe%E5%8F%AF%E4%BB%A5%E5%B5%8C%E5%A5%97"><span class="toc-number">5.3.</span> <span class="toc-text">iframe可以嵌套</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/facd74f4.html b/articles/facd74f4.html
index 6b5785fb..5df47e4f 100644
--- a/articles/facd74f4.html
+++ b/articles/facd74f4.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:32:58'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_2.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Echarts</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:32:58.556Z" title="更新于 2024-02-26 19:32:58">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Echarts/">Echarts</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>24分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Echarts"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Echarts"><a href="#Echarts" class="headerlink" title="Echarts"></a>Echarts</h1><p>一个基于 JavaScript 的开源可视化图表库。</p>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_2.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Echarts</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.898Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Echarts/">Echarts</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>24分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Echarts"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Echarts"><a href="#Echarts" class="headerlink" title="Echarts"></a>Echarts</h1><p>一个基于 JavaScript 的开源可视化图表库。</p>
 <h2 id="安装方式"><a href="#安装方式" class="headerlink" title="安装方式"></a>安装方式</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">npm init -y   <span class="comment">//初始化项目 </span></span><br><span class="line">npm install echarts --save  <span class="comment">//下载echarts</span></span><br><span class="line"><span class="comment">//ps:原生是不能用npm的;npm导入的得是带有打包工具的,比如webpack;</span></span><br><span class="line"><span class="comment">//原生可以在官网--&gt;入门篇--&gt;获取Echarts--&gt;从 CDN 获取--&gt;最上面的/dist/echarts.min.js--&gt;打开之后右键--&gt;另存为</span></span><br><span class="line">&lt;script src=<span class="string">&quot;./echarts.min.js&quot;</span>&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
 
 <h2 id="快速上手"><a href="#快速上手" class="headerlink" title="快速上手"></a>快速上手</h2><p>参考echarts官网上的快速上手</p>
@@ -168,7 +168,7 @@ <h2 id="legend-图例组件"><a href="#legend-图例组件" class="headerlink" t
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置系列列表(这个是数组对象)</span></span><br><span class="line"><span class="attr">series</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;成绩&quot;</span>, <span class="comment">//必须有</span></span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;bar&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: userScore,</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;身高&quot;</span>,  <span class="comment">//必须有</span></span><br><span class="line">    <span class="attr">type</span>:<span class="string">&quot;bar&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>:userHeight</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 图例组件</span></span><br><span class="line"><span class="attr">legend</span>:&#123;</span><br><span class="line">    <span class="attr">show</span>:<span class="literal">true</span>,</span><br><span class="line">    <span class="attr">icon</span>:<span class="string">&quot;circle&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
 <p>大致效果图如下图所示：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656841820917echarts.png" alt="效果图"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656841820917echarts.png" alt="效果图"></p>
 <p>以上内容都可以在<code>echarts官网--&gt;文档--&gt;配置项手册</code>中找到；</p>
 <h2 id="Echarts事件"><a href="#Echarts事件" class="headerlink" title="Echarts事件"></a>Echarts事件</h2><p>以下内容都可以在<code>echarts官网--&gt;文档--&gt;API</code>中找到；</p>
 <ul>
@@ -229,7 +229,7 @@ <h2 id="散点（气泡）图"><a href="#散点（气泡）图" class="headerlin
 </ul>
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;./echarts.min.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 1.初始化Echarts实例</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> myChart = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;box&quot;</span>),<span class="string">&#x27;dark&#x27;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 2.设置绘图的数据和配置项</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 模拟数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> arrs = [&#123;<span class="attr">height</span>:<span class="number">172</span>,<span class="attr">weight</span>:<span class="number">172</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">168</span>,<span class="attr">weight</span>:<span class="number">152</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">156</span>,<span class="attr">weight</span>:<span class="number">152</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">166</span>,<span class="attr">weight</span>:<span class="number">112</span>&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    ,&#123;<span class="attr">height</span>:<span class="number">155</span>,<span class="attr">weight</span>:<span class="number">132</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">148</span>,<span class="attr">weight</span>:<span class="number">113</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">172</span>,<span class="attr">weight</span>:<span class="number">162</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">171</span>,<span class="attr">weight</span>:<span class="number">132</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">173</span>,<span class="attr">weight</span>:<span class="number">132</span>&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    ];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//通过官网的示例可得知为 [[x,y],[x,y],[x,y]] 格式的数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> allData = arrs.<span class="title function_">map</span>(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span> [item.<span class="property">height</span>,item.<span class="property">weight</span>]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> options=&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置标题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">title</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">text</span>:<span class="string">&quot;身高体重图&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">textStyle</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">color</span>:<span class="string">&quot;orange&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>:<span class="string">&quot;5%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">left</span>:<span class="string">&quot;5%&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置X轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">xAxis</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">name</span>:<span class="string">&quot;身高&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>:<span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;value&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">scale</span>:<span class="literal">true</span>,   <span class="comment">//坐标不会强制包含0刻度,只在数值轴中（type: &#x27;value&#x27;）有效</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置y轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">yAxis</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">name</span>:<span class="string">&quot;体重&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>:<span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;value&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">scale</span>:<span class="literal">true</span>,  <span class="comment">//坐标不会强制包含0刻度,只在数值轴中（type: &#x27;value&#x27;）有效</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置网格坐标系</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">grid</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>:<span class="literal">false</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>:<span class="string">&quot;15%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">left</span>:<span class="string">&quot;10%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">containLabel</span>:<span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">//配置系列</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">series</span>:[</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">type</span>: <span class="string">&#x27;effectScatter&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">data</span>:allData,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">showEffectOn</span>:<span class="string">&#x27;emphasis&#x27;</span>,  <span class="comment">//配置何时显示特效  emphasis 鼠标移入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">rippleEffect</span>:&#123;  <span class="comment">//设置波纹</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">scale</span>:<span class="number">5</span>   <span class="comment">//波纹大小</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="comment">// 设置标记的大小</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">symbolSize</span>:<span class="keyword">function</span>(<span class="params">info</span>)&#123;   <span class="comment">//因为有条件来区分,所以使用的函数</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="comment">// console.log(info)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="comment">// bmi = 体重kg/(身高m*身高m)  大于28,代表肥胖</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">let</span> bmi = info[<span class="number">1</span>]/<span class="number">2</span>/(info[<span class="number">0</span>]/<span class="number">100</span>*info[<span class="number">0</span>]/<span class="number">100</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">if</span>(bmi&gt;<span class="number">28</span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="number">12</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;<span class="keyword">else</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="number">8</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="comment">//设置标记的颜色</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">itemStyle</span>:&#123; </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">color</span>:<span class="keyword">function</span>(<span class="params">datas</span>)&#123;   <span class="comment">//因为有条件来区分,所以使用的函数</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="comment">// console.log(info)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">let</span> newDatas = datas.<span class="property">value</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">let</span> bmi = newDatas[<span class="number">1</span>]/<span class="number">2</span>/(newDatas[<span class="number">0</span>]/<span class="number">100</span>*newDatas[<span class="number">0</span>]/<span class="number">100</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">if</span>(bmi&gt;<span class="number">28</span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="string">&quot;red&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;<span class="keyword">else</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="string">&quot;green&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        ]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 3.展示</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    myChart.<span class="title function_">setOption</span>(options);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
 <p>大致效果图如下图所示：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656841907919echarts2.png" alt="图例"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656841907919echarts2.png" alt="图例"></p>
 <h1 id="在vue中使用Echarts"><a href="#在vue中使用Echarts" class="headerlink" title="在vue中使用Echarts"></a>在vue中使用Echarts</h1><h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><ol>
 <li>下载：<code>npm install echarts</code></li>
 <li>在<code>main.js</code>入口文件里引入</li>
@@ -252,9 +252,9 @@ <h2 id="获取Echarts的base64地址"><a href="#获取Echarts的base64地址" cl
 <p>把getDataURL这个方法理解成为是一个相机，而你的 展示的图表是一个人在摆姿态。也就是  当照相机  按下快门的一瞬间，你这个人  姿态还没有摆好就已经被拍照了  那么自然 洗出来的 图片就没有效果了</p>
 </blockquote>
 <p>期望的：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsExport.png" alt="期望的"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/EchartsExport.png" alt="期望的"></p>
 <p>通过base64地址,在新的tab页展现的：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsBase64.png" alt="实际上"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/EchartsBase64.png" alt="实际上"></p>
 <p>解决方法</p>
 <ul>
 <li>延迟 相机的 拍照时间</li>
@@ -283,10 +283,10 @@ <h2 id="通过select切换Echarts图（不改变数据，只切换图形）"><a
 <ul>
 <li>每次绘制echart前，要dispose()销毁实例一下，否则图会重叠在一起；</li>
 </ul>
-<h3 id="方案一效果："><a href="#方案一效果：" class="headerlink" title="方案一效果："></a>方案一效果：</h3><p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsChange1.gif" alt="方案一"></p>
+<h3 id="方案一效果："><a href="#方案一效果：" class="headerlink" title="方案一效果："></a>方案一效果：</h3><p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/EchartsChange1.gif" alt="方案一"></p>
 <h3 id="方法一代码："><a href="#方法一代码：" class="headerlink" title="方法一代码："></a>方法一代码：</h3><figure class="highlight plaintext"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;el-select v-model=&quot;echartsType&quot; @change=&quot;changeEcharts&quot;&gt;</span><br><span class="line">        &lt;el-option</span><br><span class="line">          v-for=&quot;(item, index) in optVal&quot;</span><br><span class="line">          :label=&quot;item.lable&quot;</span><br><span class="line">          :value=&quot;item.value&quot;</span><br><span class="line">          :key=&quot;index&quot;</span><br><span class="line">        &gt;&lt;/el-option&gt;</span><br><span class="line">      &lt;/el-select&gt;</span><br><span class="line">      &lt;div id=&quot;meetingRoomTrend&quot; style=&quot;width: 500px; height: 500px&quot;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;changeEcharts&quot;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      echartsType: &quot;bar&quot;,</span><br><span class="line">      optVal: [</span><br><span class="line">        &#123; lable: &quot;柱状图&quot;, value: &quot;bar&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;折线图&quot;, value: &quot;line&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;饼状图&quot;, value: &quot;pie&quot; &#125;,</span><br><span class="line">      ],</span><br><span class="line">      myChart: &quot;&quot;,</span><br><span class="line">      userName: [&quot;李白&quot;, &quot;阿离&quot;, &quot;孙尚香&quot;, &quot;虞姬&quot;, &quot;马可&quot;],</span><br><span class="line">      userScore: [100, 120, 99, 89, 55, 97],</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    // 通过修改series里面的type,然后将原来的echarts dispose()与重新init来实现的;此方法可用于bar和line两种的切换;加上pie,因为series不同(pie没有横坐标啥的),所以不建议此方法;</span><br><span class="line">    getCharts() &#123;</span><br><span class="line">      this.myChart = this.$echarts.init(</span><br><span class="line">        document.getElementById(&quot;meetingRoomTrend&quot;)</span><br><span class="line">      );</span><br><span class="line">      //   this.myChart.showLoading();</span><br><span class="line">      var options = &#123;</span><br><span class="line">        //配置标题</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;学员成绩表鸭&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        //配置x轴</span><br><span class="line">        xAxis: &#123;</span><br><span class="line">          type: &quot;category&quot;, //category(类目名称),value(数值)</span><br><span class="line">          data: this.userName,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置提示语</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          show: true,</span><br><span class="line">          trigger: &quot;axis&quot;, //触发提示类型 item (默认) axis (中间有条细线)</span><br><span class="line">          axisPointer: &#123;</span><br><span class="line">            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果</span><br><span class="line">            type: &quot;shadow&quot;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置y轴</span><br><span class="line">        yAxis: &#123;</span><br><span class="line">          type: &quot;value&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置系列列表(这个是数组对象)</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            type: this.echartsType,</span><br><span class="line">            data: this.userScore,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      this.myChart.setOption(options);</span><br><span class="line">    &#125;,</span><br><span class="line">    changeEcharts() &#123;</span><br><span class="line">      /**</span><br><span class="line">       * clear类似于v-show</span><br><span class="line">       * dispose类似于v-if</span><br><span class="line">       */</span><br><span class="line">      if (![null, &quot;&quot;, undefined].includes(this.myChart)) &#123;</span><br><span class="line">        // this.myChart.dispose(); //解决echarts dom已经加载的报错</span><br><span class="line">        // this.myChart.clear();</span><br><span class="line">      &#125;</span><br><span class="line">      this.getCharts();</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    this.getCharts();</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
 
-<h3 id="方案二效果："><a href="#方案二效果：" class="headerlink" title="方案二效果："></a>方案二效果：</h3><p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsChange2.gif" alt="方案二"></p>
+<h3 id="方案二效果："><a href="#方案二效果：" class="headerlink" title="方案二效果："></a>方案二效果：</h3><p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/EchartsChange2.gif" alt="方案二"></p>
 <h3 id="方法二代码："><a href="#方法二代码：" class="headerlink" title="方法二代码："></a>方法二代码：</h3><figure class="highlight plaintext"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;el-select v-model=&quot;echartsType&quot; @change=&quot;changeEcharts&quot;&gt;</span><br><span class="line">        &lt;el-option</span><br><span class="line">          v-for=&quot;(item, index) in optVal&quot;</span><br><span class="line">          :label=&quot;item.lable&quot;</span><br><span class="line">          :value=&quot;item.value&quot;</span><br><span class="line">          :key=&quot;index&quot;</span><br><span class="line">        &gt;&lt;/el-option&gt;</span><br><span class="line">      &lt;/el-select&gt;</span><br><span class="line">      &lt;div id=&quot;meetingRoomTrend&quot; style=&quot;width: 500px; height: 500px&quot;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;changeEcharts&quot;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      echartsType: &quot;bar&quot;,</span><br><span class="line">      optVal: [</span><br><span class="line">        &#123; lable: &quot;柱状图&quot;, value: &quot;bar&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;折线图&quot;, value: &quot;line&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;饼状图&quot;, value: &quot;pie&quot; &#125;,</span><br><span class="line">      ],</span><br><span class="line">      myChart: &quot;&quot;,</span><br><span class="line">      optionsBar: &quot;&quot;,</span><br><span class="line">      optionsLine: &quot;&quot;,</span><br><span class="line">      optionsPie: &quot;&quot;,</span><br><span class="line">      userName: [&quot;李白&quot;, &quot;阿离&quot;, &quot;孙尚香&quot;, &quot;虞姬&quot;, &quot;马可&quot;],</span><br><span class="line">      userScore: [100, 120, 99, 89, 55, 97],</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    // echarts所有的配置项都在options,改变这个就相当于改变了echarts;</span><br><span class="line">    getCharts() &#123;</span><br><span class="line">      this.myChart = this.$echarts.init(</span><br><span class="line">        document.getElementById(&quot;meetingRoomTrend&quot;)</span><br><span class="line">      );</span><br><span class="line">      this.optionsBar = &#123;</span><br><span class="line">        //配置标题</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;学员成绩表鸭&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        //配置x轴</span><br><span class="line">        xAxis: &#123;</span><br><span class="line">          type: &quot;category&quot;, //category(类目名称),value(数值)</span><br><span class="line">          data: this.userName,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置提示语</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          show: true,</span><br><span class="line">          trigger: &quot;axis&quot;, //触发提示类型 item (默认) axis (中间有条细线)</span><br><span class="line">          axisPointer: &#123;</span><br><span class="line">            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果</span><br><span class="line">            type: &quot;shadow&quot;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置y轴</span><br><span class="line">        yAxis: &#123;</span><br><span class="line">          type: &quot;value&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置系列列表(这个是数组对象)</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            type: &quot;bar&quot;,</span><br><span class="line">            data: this.userScore,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line">      this.optionsLine = &#123;</span><br><span class="line">        //配置标题</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;学员成绩表鸭&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        //配置x轴</span><br><span class="line">        xAxis: &#123;</span><br><span class="line">          type: &quot;category&quot;, //category(类目名称),value(数值)</span><br><span class="line">          data: this.userName,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置提示语</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          show: true,</span><br><span class="line">          trigger: &quot;axis&quot;, //触发提示类型 item (默认) axis (中间有条细线)</span><br><span class="line">          axisPointer: &#123;</span><br><span class="line">            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果</span><br><span class="line">            type: &quot;shadow&quot;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置y轴</span><br><span class="line">        yAxis: &#123;</span><br><span class="line">          type: &quot;value&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置系列列表(这个是数组对象)</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            type: &quot;line&quot;,</span><br><span class="line">            data: this.userScore,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line">      this.optionsPie = &#123;</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;Referer of a Website&quot;,</span><br><span class="line">          subtext: &quot;Fake Data&quot;,</span><br><span class="line">          left: &quot;center&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          trigger: &quot;item&quot;,</span><br><span class="line">          // confine: true,</span><br><span class="line">          // formatter: &quot;&#123;a&#125; &lt;br/&gt;&#123;b&#125; : &#123;c&#125; (&#123;d&#125;%)&quot;,</span><br><span class="line">         </span><br><span class="line">        &#125;,</span><br><span class="line">        legend: &#123;</span><br><span class="line">          orient: &quot;vertical&quot;,</span><br><span class="line">          left: &quot;left&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            name: &quot;Access From&quot;,</span><br><span class="line">            type: &quot;pie&quot;,</span><br><span class="line">            radius: &quot;50%&quot;,</span><br><span class="line">            data: [</span><br><span class="line">              &#123; value: 1048, name: &quot;Search Engine&quot; &#125;,</span><br><span class="line">              &#123; value: 735, name: &quot;Direct&quot; &#125;,</span><br><span class="line">              &#123; value: 580, name: &quot;Email&quot; &#125;,</span><br><span class="line">              &#123; value: 484, name: &quot;Union Ads&quot; &#125;,</span><br><span class="line">              &#123; value: 300, name: &quot;Video Ads&quot; &#125;,</span><br><span class="line">            ],</span><br><span class="line">            emphasis: &#123;</span><br><span class="line">              itemStyle: &#123;</span><br><span class="line">                shadowBlur: 10,</span><br><span class="line">                shadowOffsetX: 0,</span><br><span class="line">                shadowColor: &quot;rgba(0, 0, 0, 0.5)&quot;,</span><br><span class="line">              &#125;,</span><br><span class="line">            &#125;,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      // this.myChart.setOption(options);</span><br><span class="line">    &#125;,</span><br><span class="line">    changeEcharts() &#123;</span><br><span class="line">      /**</span><br><span class="line">       * clear类似于v-show</span><br><span class="line">       * dispose类似于v-if</span><br><span class="line">       */</span><br><span class="line">      if (![null, &quot;&quot;, undefined].includes(this.myChart)) &#123;</span><br><span class="line">        this.myChart.dispose(); ////解决echarts dom已经加载的报错</span><br><span class="line">        // this.myChart.clear();</span><br><span class="line">      &#125;</span><br><span class="line">      if (this.echartsType == &quot;bar&quot;) &#123;</span><br><span class="line">        this.getCharts();</span><br><span class="line">        this.myChart.setOption(this.optionsBar);</span><br><span class="line">      &#125; else if (this.echartsType == &quot;line&quot;) &#123;</span><br><span class="line">        this.getCharts();</span><br><span class="line">        this.myChart.setOption(this.optionsLine);</span><br><span class="line">      &#125; else if (this.echartsType == &quot;pie&quot;) &#123;</span><br><span class="line">        this.getCharts();</span><br><span class="line">        this.myChart.setOption(this.optionsPie);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    this.getCharts();</span><br><span class="line">    this.myChart.setOption(this.optionsBar);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
 
 
@@ -297,24 +297,24 @@ <h2 id="如何自定义tooltip-formatter"><a href="#如何自定义tooltip-forma
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">tooltip</span>: &#123;</span><br><span class="line">        <span class="attr">formatter</span>:<span class="keyword">function</span>(<span class="params">params</span>)&#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(params);</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;要展示的&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
 <p>通过上面切换Echrarts图的方法二来实验，输出如下：</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsFormatter.png" alt="formatter"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/EchartsFormatter.png" alt="formatter"></p>
 <ul>
 <li>拼凑：</li>
 </ul>
 <figure class="highlight js"><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"><span class="attr">formatter</span>: <span class="function">(<span class="params">params</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(params);</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;`</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsFormatter2.png" alt="formatter"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/EchartsFormatter2.png" alt="formatter"></p>
 <ul>
 <li>将tooltip限制在图表区域内：</li>
 </ul>
 <p>当return的东西足够多，会超出浏览器的clientHieght范围</p>
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsFormatter3.png" alt="formatter"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/EchartsFormatter3.png" alt="formatter"></p>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//相关代码</span></span><br><span class="line"><span class="attr">formatter</span>: <span class="function">(<span class="params">params</span>) =&gt;</span> &#123;</span><br><span class="line"><span class="comment">// console.log(params);</span></span><br><span class="line"><span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;`</span>;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
 
 <p>解决方法：</p>
 <figure class="highlight js"><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"><span class="attr">tooltip</span>: &#123;</span><br><span class="line">	<span class="attr">confine</span>: <span class="literal">true</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsFormatter4.png" alt="formatter"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/EchartsFormatter4.png" alt="formatter"></p>
 <p>上面的实例就是</p>
 <figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="attr">tooltip</span>: &#123;</span><br><span class="line">    <span class="attr">trigger</span>: <span class="string">&quot;item&quot;</span>,</span><br><span class="line">    <span class="attr">confine</span>: <span class="literal">true</span>,</span><br><span class="line">            <span class="comment">// formatter: &quot;&#123;a&#125; &lt;br/&gt;&#123;b&#125; : &#123;c&#125; (&#123;d&#125;%)&quot;,</span></span><br><span class="line">            <span class="attr">formatter</span>: <span class="function">(<span class="params">params</span>) =&gt;</span> &#123;</span><br><span class="line">                <span class="comment">// console.log(params);</span></span><br><span class="line">                <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;`</span>;</span><br><span class="line">            &#125;,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
 
@@ -331,7 +331,7 @@ <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/bbt953/article/details/126300280">[echarts]clear和dispose的区别和使用场景</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_38974638/article/details/108986033">ECharts formatter属性设置3种方式（字符串模板，函数模板，回调函数）</a></p>
 <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_42274805/article/details/119613193?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-119613193-blog-101207199.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-119613193-blog-101207199.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=5">[Echarts]如何自定义tooltip formatter</a></p>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/facd74f4.html">https://fsllala.top/articles/facd74f4.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Echarts/">Echarts</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_2.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/d95e4f83.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs3 Express</div></div></a></div><div class="next-post pull-right"><a href="/articles/3a42db2d.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_20.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Echarts"><span class="toc-number">1.</span> <span class="toc-text">Echarts</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F"><span class="toc-number">1.1.</span> <span class="toc-text">安装方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B"><span class="toc-number">1.2.</span> <span class="toc-text">快速上手</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#series-%E9%85%8D%E7%BD%AE%E7%B3%BB%E5%88%97%E5%88%97%E8%A1%A8"><span class="toc-number">1.3.</span> <span class="toc-text">series 配置系列列表</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#grid-%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C%E5%9D%90%E6%A0%87%E7%B3%BB"><span class="toc-number">1.4.</span> <span class="toc-text">grid 配置网络坐标系</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#tooltip-%E9%85%8D%E7%BD%AE%E6%8F%90%E7%A4%BA%E8%AF%AD"><span class="toc-number">1.5.</span> <span class="toc-text">tooltip 配置提示语</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#toolbox-%E5%B7%A5%E5%85%B7%E6%A0%8F"><span class="toc-number">1.6.</span> <span class="toc-text">toolbox 工具栏</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#legend-%E5%9B%BE%E4%BE%8B%E7%BB%84%E4%BB%B6"><span class="toc-number">1.7.</span> <span class="toc-text">legend 图例组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Echarts%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.8.</span> <span class="toc-text">Echarts事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%A5%E4%B8%8A%E5%86%85%E5%AE%B9%E5%85%A8%E9%83%A8%E4%BB%A3%E7%A0%81"><span class="toc-number">1.9.</span> <span class="toc-text">以上内容全部代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%A3%E7%82%B9%EF%BC%88%E6%B0%94%E6%B3%A1%EF%BC%89%E5%9B%BE"><span class="toc-number">1.10.</span> <span class="toc-text">散点（气泡）图</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9C%A8vue%E4%B8%AD%E4%BD%BF%E7%94%A8Echarts"><span class="toc-number">2.</span> <span class="toc-text">在vue中使用Echarts</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">2.1.</span> <span class="toc-text">基本使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96Echarts%E7%9A%84base64%E5%9C%B0%E5%9D%80"><span class="toc-number">2.2.</span> <span class="toc-text">获取Echarts的base64地址</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E8%BF%87select%E5%88%87%E6%8D%A2Echarts%E5%9B%BE%EF%BC%88%E4%B8%8D%E6%94%B9%E5%8F%98%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%8F%AA%E5%88%87%E6%8D%A2%E5%9B%BE%E5%BD%A2%EF%BC%89"><span class="toc-number">2.3.</span> <span class="toc-text">通过select切换Echarts图（不改变数据，只切换图形）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%B8%80%E6%95%88%E6%9E%9C%EF%BC%9A"><span class="toc-number">2.3.1.</span> <span class="toc-text">方案一效果：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%B8%80%E4%BB%A3%E7%A0%81%EF%BC%9A"><span class="toc-number">2.3.2.</span> <span class="toc-text">方法一代码：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%BA%8C%E6%95%88%E6%9E%9C%EF%BC%9A"><span class="toc-number">2.3.3.</span> <span class="toc-text">方案二效果：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%BA%8C%E4%BB%A3%E7%A0%81%EF%BC%9A"><span class="toc-number">2.3.4.</span> <span class="toc-text">方法二代码：</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E8%87%AA%E5%AE%9A%E4%B9%89tooltip-formatter"><span class="toc-number">2.4.</span> <span class="toc-text">如何自定义tooltip formatter</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">3.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/facd74f4.html">https://fsllala.top/articles/facd74f4.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Echarts/">Echarts</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_2.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/d95e4f83.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_7.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJs3 Express</div></div></a></div><div class="next-post pull-right"><a href="/articles/3a42db2d.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_20.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue3</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Echarts"><span class="toc-number">1.</span> <span class="toc-text">Echarts</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F"><span class="toc-number">1.1.</span> <span class="toc-text">安装方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B"><span class="toc-number">1.2.</span> <span class="toc-text">快速上手</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#series-%E9%85%8D%E7%BD%AE%E7%B3%BB%E5%88%97%E5%88%97%E8%A1%A8"><span class="toc-number">1.3.</span> <span class="toc-text">series 配置系列列表</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#grid-%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C%E5%9D%90%E6%A0%87%E7%B3%BB"><span class="toc-number">1.4.</span> <span class="toc-text">grid 配置网络坐标系</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#tooltip-%E9%85%8D%E7%BD%AE%E6%8F%90%E7%A4%BA%E8%AF%AD"><span class="toc-number">1.5.</span> <span class="toc-text">tooltip 配置提示语</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#toolbox-%E5%B7%A5%E5%85%B7%E6%A0%8F"><span class="toc-number">1.6.</span> <span class="toc-text">toolbox 工具栏</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#legend-%E5%9B%BE%E4%BE%8B%E7%BB%84%E4%BB%B6"><span class="toc-number">1.7.</span> <span class="toc-text">legend 图例组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Echarts%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.8.</span> <span class="toc-text">Echarts事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%A5%E4%B8%8A%E5%86%85%E5%AE%B9%E5%85%A8%E9%83%A8%E4%BB%A3%E7%A0%81"><span class="toc-number">1.9.</span> <span class="toc-text">以上内容全部代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%A3%E7%82%B9%EF%BC%88%E6%B0%94%E6%B3%A1%EF%BC%89%E5%9B%BE"><span class="toc-number">1.10.</span> <span class="toc-text">散点（气泡）图</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9C%A8vue%E4%B8%AD%E4%BD%BF%E7%94%A8Echarts"><span class="toc-number">2.</span> <span class="toc-text">在vue中使用Echarts</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">2.1.</span> <span class="toc-text">基本使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96Echarts%E7%9A%84base64%E5%9C%B0%E5%9D%80"><span class="toc-number">2.2.</span> <span class="toc-text">获取Echarts的base64地址</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E8%BF%87select%E5%88%87%E6%8D%A2Echarts%E5%9B%BE%EF%BC%88%E4%B8%8D%E6%94%B9%E5%8F%98%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%8F%AA%E5%88%87%E6%8D%A2%E5%9B%BE%E5%BD%A2%EF%BC%89"><span class="toc-number">2.3.</span> <span class="toc-text">通过select切换Echarts图（不改变数据，只切换图形）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%B8%80%E6%95%88%E6%9E%9C%EF%BC%9A"><span class="toc-number">2.3.1.</span> <span class="toc-text">方案一效果：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%B8%80%E4%BB%A3%E7%A0%81%EF%BC%9A"><span class="toc-number">2.3.2.</span> <span class="toc-text">方法一代码：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%BA%8C%E6%95%88%E6%9E%9C%EF%BC%9A"><span class="toc-number">2.3.3.</span> <span class="toc-text">方案二效果：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%BA%8C%E4%BB%A3%E7%A0%81%EF%BC%9A"><span class="toc-number">2.3.4.</span> <span class="toc-text">方法二代码：</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E8%87%AA%E5%AE%9A%E4%B9%89tooltip-formatter"><span class="toc-number">2.4.</span> <span class="toc-text">如何自定义tooltip formatter</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">3.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/articles/feee8227.html b/articles/feee8227.html
index 91aca71d..88f7ed5a 100644
--- a/articles/feee8227.html
+++ b/articles/feee8227.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: true,
-  postUpdate: '2024-02-26 19:35:37'
+  postUpdate: '2024-07-03 17:43:32'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_14.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">this</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-02-26T11:35:37.049Z" title="更新于 2024-02-26 19:35:37">2024-02-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/this%E6%8C%87%E5%90%91/">this指向</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>10分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="this"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="This指向"><a href="#This指向" class="headerlink" title="This指向"></a>This指向</h1><ul>
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cover.fsllala.top/default_cover_14.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">this</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-03T09:43:32.884Z" title="更新于 2024-07-03 17:43:32">2024-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JS/this%E6%8C%87%E5%90%91/">this指向</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>10分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="this"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="This指向"><a href="#This指向" class="headerlink" title="This指向"></a>This指向</h1><ul>
 <li>函数在调用时，JavaScript会默认给this绑定一个值；</li>
 <li>this 的指向不是在创建时就绑定了，而是在调用时被绑定的；</li>
 <li>this的绑定和定义的位置（编写的位置）没有关系；</li>
@@ -230,7 +230,7 @@ <h3 id="call、apply"><a href="#call、apply" class="headerlink" title="call、a
 </ul>
 <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">name, age, height</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;foo被调用&quot;</span>, <span class="variable language_">this</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;打印参数&quot;</span>, name, age, height);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ()调用</span></span><br><span class="line"><span class="title function_">foo</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="number">173</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;.&quot;</span>.<span class="title function_">repeat</span>(<span class="number">34</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">/*apply</span></span><br><span class="line"><span class="comment">    第一个参数:绑定this</span></span><br><span class="line"><span class="comment">    第二个参数:传入额外的参数,以数组的形式</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line">foo.<span class="title function_">apply</span>(<span class="string">&#x27;apply&#x27;</span>, [<span class="string">&quot;fsl&quot;</span>, <span class="number">24</span>, <span class="number">174</span>]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;.&quot;</span>.<span class="title function_">repeat</span>(<span class="number">34</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">/*call</span></span><br><span class="line"><span class="comment">    第一个参数:绑定this</span></span><br><span class="line"><span class="comment">    第二个参数:传入额外的参数,以参数列表的形式</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">foo.<span class="title function_">call</span>(<span class="string">&quot;call&quot;</span>,<span class="string">&quot;forward&quot;</span>,<span class="number">25</span>,<span class="number">175</span>);</span><br></pre></td></tr></table></figure>
 
-<p><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/this1675947654697.png" alt="this"></p>
+<p><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/this1675947654697.png" alt="this"></p>
 <h3 id="bind"><a href="#bind" class="headerlink" title="bind"></a>bind</h3><p>需求：调用foo时,总是绑定到obj对象身上,并不希望foo对象身上有添加的函数;</p>
 <ul>
 <li>可以通过call或apply实现</li>
@@ -329,7 +329,7 @@ <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考
 <li><p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/zjjDaily/p/9482958.html">深入理解js函数中this指针的指向</a></p>
 </li>
 </ul>
-</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/feee8227.html">https://fsllala.top/articles/feee8227.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/this%E6%8C%87%E5%90%91/">this指向</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_14.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/42ce80b9.html"><img class="prev-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">websocket</div></div></a></div><div class="next-post pull-right"><a href="/articles/f2866b73.html"><img class="next-cover" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">箭头函数</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#This%E6%8C%87%E5%90%91"><span class="toc-number">1.</span> <span class="toc-text">This指向</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9B%E7%A7%8D%E7%BB%91%E5%AE%9A%E8%A7%84%E5%88%99"><span class="toc-number">1.1.</span> <span class="toc-text">四种绑定规则</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%BB%98%E8%AE%A4%E7%BB%91%E5%AE%9A-%E7%8B%AC%E7%AB%8B%E8%B0%83%E7%94%A8"><span class="toc-number">1.2.</span> <span class="toc-text">默认绑定(独立调用)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9A%90%E5%BC%8F%E7%BB%91%E5%AE%9A-%E5%AF%B9%E8%B1%A1%E7%8E%AF%E5%A2%83-%E5%B1%9E%E6%80%A7%E8%B0%83%E7%94%A8"><span class="toc-number">1.3.</span> <span class="toc-text">隐式绑定(对象环境(属性调用))</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%98%BE%E5%BC%8F%E7%BB%91%E5%AE%9A"><span class="toc-number">1.4.</span> <span class="toc-text">显式绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#call%E3%80%81apply"><span class="toc-number">1.4.1.</span> <span class="toc-text">call、apply</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#bind"><span class="toc-number">1.4.2.</span> <span class="toc-text">bind</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#new%E7%BB%91%E5%AE%9A"><span class="toc-number">1.5.</span> <span class="toc-text">new绑定	:</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#new%E5%81%9A%E4%BA%86%E4%BB%80%E4%B9%88%E4%BA%8B%E6%83%85"><span class="toc-number">1.5.1.</span> <span class="toc-text">new做了什么事情</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#this%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">1.6.</span> <span class="toc-text">this优先级</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%EF%BC%9A"><span class="toc-number">1.7.</span> <span class="toc-text">事件对象：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%EF%BC%9A"><span class="toc-number">1.8.</span> <span class="toc-text">箭头函数：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#setTimeout%E4%B8%8EsetInterval"><span class="toc-number">1.9.</span> <span class="toc-text">setTimeout与setInterval:</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">2.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fsllala.top">Forward</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fsllala.top/articles/feee8227.html">https://fsllala.top/articles/feee8227.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fsllala.top" target="_blank">Forward の Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/this%E6%8C%87%E5%90%91/">this指向</a></div><div class="post_share"><div class="social-share" data-image="https://cover.fsllala.top/default_cover_14.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/articles/42ce80b9.html"><img class="prev-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_26.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">websocket</div></div></a></div><div class="next-post pull-right"><a href="/articles/f2866b73.html"><img class="next-cover" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_39.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">箭头函数</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#This%E6%8C%87%E5%90%91"><span class="toc-number">1.</span> <span class="toc-text">This指向</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9B%E7%A7%8D%E7%BB%91%E5%AE%9A%E8%A7%84%E5%88%99"><span class="toc-number">1.1.</span> <span class="toc-text">四种绑定规则</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%BB%98%E8%AE%A4%E7%BB%91%E5%AE%9A-%E7%8B%AC%E7%AB%8B%E8%B0%83%E7%94%A8"><span class="toc-number">1.2.</span> <span class="toc-text">默认绑定(独立调用)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9A%90%E5%BC%8F%E7%BB%91%E5%AE%9A-%E5%AF%B9%E8%B1%A1%E7%8E%AF%E5%A2%83-%E5%B1%9E%E6%80%A7%E8%B0%83%E7%94%A8"><span class="toc-number">1.3.</span> <span class="toc-text">隐式绑定(对象环境(属性调用))</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%98%BE%E5%BC%8F%E7%BB%91%E5%AE%9A"><span class="toc-number">1.4.</span> <span class="toc-text">显式绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#call%E3%80%81apply"><span class="toc-number">1.4.1.</span> <span class="toc-text">call、apply</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#bind"><span class="toc-number">1.4.2.</span> <span class="toc-text">bind</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#new%E7%BB%91%E5%AE%9A"><span class="toc-number">1.5.</span> <span class="toc-text">new绑定	:</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#new%E5%81%9A%E4%BA%86%E4%BB%80%E4%B9%88%E4%BA%8B%E6%83%85"><span class="toc-number">1.5.1.</span> <span class="toc-text">new做了什么事情</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#this%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">1.6.</span> <span class="toc-text">this优先级</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%EF%BC%9A"><span class="toc-number">1.7.</span> <span class="toc-text">事件对象：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%EF%BC%9A"><span class="toc-number">1.8.</span> <span class="toc-text">箭头函数：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#setTimeout%E4%B8%8EsetInterval"><span class="toc-number">1.9.</span> <span class="toc-text">setTimeout与setInterval:</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">2.</span> <span class="toc-text">参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/Echarts/index.html b/categories/Echarts/index.html
index 2d35481d..372b0420 100644
--- a/categories/Echarts/index.html
+++ b/categories/Echarts/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Echarts</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Echarts</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/facd74f4.html" title="Echarts"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_2.webp" alt="Echarts" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></div><a class="article-sort-item-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Echarts</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Echarts</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/facd74f4.html" title="Echarts"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_2.webp" alt="Echarts" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></div><a class="article-sort-item-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/JS/Blob/index.html b/categories/JS/Blob/index.html
index faf2cd73..ec2240b3 100644
--- a/categories/JS/Blob/index.html
+++ b/categories/JS/Blob/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Blob</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Blob</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Blob</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Blob</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/Blob/\346\226\207\344\273\266\344\270\213\350\275\275/index.html" "b/categories/JS/Blob/\346\226\207\344\273\266\344\270\213\350\275\275/index.html"
index 6c7842fc..406cbe5e 100644
--- "a/categories/JS/Blob/\346\226\207\344\273\266\344\270\213\350\275\275/index.html"
+++ "b/categories/JS/Blob/\346\226\207\344\273\266\344\270\213\350\275\275/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">文件下载</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 文件下载</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">文件下载</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 文件下载</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/JS/Dom/index.html b/categories/JS/Dom/index.html
index b3526377..471b5fea 100644
--- a/categories/JS/Dom/index.html
+++ b/categories/JS/Dom/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Dom</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Dom</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Dom</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Dom</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/Dom\345\260\272\345\257\270\344\270\216\344\275\215\347\275\256/index.html" "b/categories/JS/Dom\345\260\272\345\257\270\344\270\216\344\275\215\347\275\256/index.html"
index 57320e06..57380ccf 100644
--- "a/categories/JS/Dom\345\260\272\345\257\270\344\270\216\344\275\215\347\275\256/index.html"
+++ "b/categories/JS/Dom\345\260\272\345\257\270\344\270\216\344\275\215\347\275\256/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Dom尺寸与位置</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Dom尺寸与位置</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Dom尺寸与位置</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Dom尺寸与位置</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/JS/EventLoop/index.html b/categories/JS/EventLoop/index.html
index dcc60884..30fd3753 100644
--- a/categories/JS/EventLoop/index.html
+++ b/categories/JS/EventLoop/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">EventLoop</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - EventLoop</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">EventLoop</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - EventLoop</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/JSON-stringify-\346\267\261\346\213\267\350\264\235\345\274\212\347\253\257/index.html" "b/categories/JS/JSON-stringify-\346\267\261\346\213\267\350\264\235\345\274\212\347\253\257/index.html"
index b88599c5..b1d0f6db 100644
--- "a/categories/JS/JSON-stringify-\346\267\261\346\213\267\350\264\235\345\274\212\347\253\257/index.html"
+++ "b/categories/JS/JSON-stringify-\346\267\261\346\213\267\350\264\235\345\274\212\347\253\257/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">JSON.stringify 深拷贝弊端</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - JSON.stringify 深拷贝弊端</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">JSON.stringify 深拷贝弊端</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - JSON.stringify 深拷贝弊端</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/JS/https/index.html b/categories/JS/https/index.html
index 7fd7384c..82ce30e1 100644
--- a/categories/JS/https/index.html
+++ b/categories/JS/https/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">https</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - https</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">https</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - https</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/JS/index.html b/categories/JS/index.html
index 095b31c5..9041898c 100644
--- a/categories/JS/index.html
+++ b/categories/JS/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">JS</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - JS</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/categories/JS/page/2/">2</a><a class="extend next" rel="next" href="/categories/JS/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">JS</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - JS</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/categories/JS/page/2/">2</a><a class="extend next" rel="next" href="/categories/JS/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/JS/page/2/index.html b/categories/JS/page/2/index.html
index 3b53cfb1..0301c97c 100644
--- a/categories/JS/page/2/index.html
+++ b/categories/JS/page/2/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">JS</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - JS</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/categories/JS/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/categories/JS/">1</a><span class="page-number current">2</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">JS</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - JS</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/categories/JS/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/categories/JS/">1</a><span class="page-number current">2</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/this\346\214\207\345\220\221/index.html" "b/categories/JS/this\346\214\207\345\220\221/index.html"
index ea7744b2..5a29e831 100644
--- "a/categories/JS/this\346\214\207\345\220\221/index.html"
+++ "b/categories/JS/this\346\214\207\345\220\221/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">this指向</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - this指向</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">this指向</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - this指向</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/JS/websocket/index.html b/categories/JS/websocket/index.html
index 450dc77f..666e993b 100644
--- a/categories/JS/websocket/index.html
+++ b/categories/JS/websocket/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">websocket</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - websocket</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">websocket</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - websocket</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\345\216\237\345\236\213/index.html" "b/categories/JS/\345\216\237\345\236\213/index.html"
index f1c62ea5..5de4c16f 100644
--- "a/categories/JS/\345\216\237\345\236\213/index.html"
+++ "b/categories/JS/\345\216\237\345\236\213/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">原型</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 原型</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">原型</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 原型</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\345\216\237\345\236\213/\345\216\237\345\236\213\351\223\276/index.html" "b/categories/JS/\345\216\237\345\236\213/\345\216\237\345\236\213\351\223\276/index.html"
index cb305291..2cb3689e 100644
--- "a/categories/JS/\345\216\237\345\236\213/\345\216\237\345\236\213\351\223\276/index.html"
+++ "b/categories/JS/\345\216\237\345\236\213/\345\216\237\345\236\213\351\223\276/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">原型链</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 原型链</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">原型链</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 原型链</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275/index.html" "b/categories/JS/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275/index.html"
index ca0808d8..5c46e6f9 100644
--- "a/categories/JS/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275/index.html"
+++ "b/categories/JS/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">图片懒加载</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 图片懒加载</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">图片懒加载</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 图片懒加载</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\345\274\202\346\255\245\345\244\204\347\220\206/index.html" "b/categories/JS/\345\274\202\346\255\245\345\244\204\347\220\206/index.html"
index e6d67c9a..66d3174e 100644
--- "a/categories/JS/\345\274\202\346\255\245\345\244\204\347\220\206/index.html"
+++ "b/categories/JS/\345\274\202\346\255\245\345\244\204\347\220\206/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">异步处理</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 异步处理</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">异步处理</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 异步处理</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\346\213\226\346\213\275/index.html" "b/categories/JS/\346\213\226\346\213\275/index.html"
index 08f4b04a..28675cd9 100644
--- "a/categories/JS/\346\213\226\346\213\275/index.html"
+++ "b/categories/JS/\346\213\226\346\213\275/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">拖拽</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 拖拽</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">拖拽</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 拖拽</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\346\240\210\345\206\205\345\255\230\345\222\214\345\240\206\345\206\205\345\255\230/index.html" "b/categories/JS/\346\240\210\345\206\205\345\255\230\345\222\214\345\240\206\345\206\205\345\255\230/index.html"
index 6dca8f4c..27e5ccb0 100644
--- "a/categories/JS/\346\240\210\345\206\205\345\255\230\345\222\214\345\240\206\345\206\205\345\255\230/index.html"
+++ "b/categories/JS/\346\240\210\345\206\205\345\255\230\345\222\214\345\240\206\345\206\205\345\255\230/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">栈内存和堆内存</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 栈内存和堆内存</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">栈内存和堆内存</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 栈内存和堆内存</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\346\267\261\346\265\205\346\213\267\350\264\235/index.html" "b/categories/JS/\346\267\261\346\265\205\346\213\267\350\264\235/index.html"
index 229caa2c..e574cde0 100644
--- "a/categories/JS/\346\267\261\346\265\205\346\213\267\350\264\235/index.html"
+++ "b/categories/JS/\346\267\261\346\265\205\346\213\267\350\264\235/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">深浅拷贝</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 深浅拷贝</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">深浅拷贝</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 深浅拷贝</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\347\256\255\345\244\264\345\207\275\346\225\260/index.html" "b/categories/JS/\347\256\255\345\244\264\345\207\275\346\225\260/index.html"
index e8992765..ed2f4713 100644
--- "a/categories/JS/\347\256\255\345\244\264\345\207\275\346\225\260/index.html"
+++ "b/categories/JS/\347\256\255\345\244\264\345\207\275\346\225\260/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">箭头函数</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 箭头函数</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">箭头函数</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 箭头函数</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\350\267\250\345\237\237/index.html" "b/categories/JS/\350\267\250\345\237\237/index.html"
index f55eb228..34dbbd29 100644
--- "a/categories/JS/\350\267\250\345\237\237/index.html"
+++ "b/categories/JS/\350\267\250\345\237\237/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">跨域</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 跨域</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">跨域</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 跨域</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\351\235\242\345\220\221\345\257\271\350\261\241/index.html" "b/categories/JS/\351\235\242\345\220\221\345\257\271\350\261\241/index.html"
index 5d19cc8e..88bf42b5 100644
--- "a/categories/JS/\351\235\242\345\220\221\345\257\271\350\261\241/index.html"
+++ "b/categories/JS/\351\235\242\345\220\221\345\257\271\350\261\241/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">面向对象</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 面向对象</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">面向对象</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 面向对象</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\351\242\204\350\247\243\346\236\220/index.html" "b/categories/JS/\351\242\204\350\247\243\346\236\220/index.html"
index 8f299cdc..10aa4ac3 100644
--- "a/categories/JS/\351\242\204\350\247\243\346\236\220/index.html"
+++ "b/categories/JS/\351\242\204\350\247\243\346\236\220/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">预解析</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 预解析</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">预解析</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 预解析</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/JS/\351\242\204\350\247\243\346\236\220/\344\275\234\347\224\250\345\237\237\351\223\276/index.html" "b/categories/JS/\351\242\204\350\247\243\346\236\220/\344\275\234\347\224\250\345\237\237\351\223\276/index.html"
index ee879685..bdf49edf 100644
--- "a/categories/JS/\351\242\204\350\247\243\346\236\220/\344\275\234\347\224\250\345\237\237\351\223\276/index.html"
+++ "b/categories/JS/\351\242\204\350\247\243\346\236\220/\344\275\234\347\224\250\345\237\237\351\223\276/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">作用域链</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 作用域链</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">作用域链</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 作用域链</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/Nginx/index.html b/categories/Nginx/index.html
index 4297eec9..dc845d6d 100644
--- a/categories/Nginx/index.html
+++ b/categories/Nginx/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Nginx</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Nginx</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" alt="Nginx" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div><a class="article-sort-item-title" href="/articles/65b69107.html" title="Nginx">Nginx</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Nginx</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Nginx</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" alt="Nginx" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div><a class="article-sort-item-title" href="/articles/65b69107.html" title="Nginx">Nginx</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/NodeJs/CommonJs/ES6/index.html b/categories/NodeJs/CommonJs/ES6/index.html
index ae9b25dc..5dfebbc4 100644
--- a/categories/NodeJs/CommonJs/ES6/index.html
+++ b/categories/NodeJs/CommonJs/ES6/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">ES6</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - ES6</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">ES6</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - ES6</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/NodeJs/CommonJs/index.html b/categories/NodeJs/CommonJs/index.html
index a72630f0..130c2678 100644
--- a/categories/NodeJs/CommonJs/index.html
+++ b/categories/NodeJs/CommonJs/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">CommonJs</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - CommonJs</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">CommonJs</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - CommonJs</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/NodeJs/Express/index.html b/categories/NodeJs/Express/index.html
index 760604f9..de6f6647 100644
--- a/categories/NodeJs/Express/index.html
+++ b/categories/NodeJs/Express/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Express</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Express</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Express</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Express</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/NodeJs/Express1/index.html b/categories/NodeJs/Express1/index.html
index dcd09043..63d1a86c 100644
--- a/categories/NodeJs/Express1/index.html
+++ b/categories/NodeJs/Express1/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Express1</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Express1</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Express1</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Express1</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/NodeJs/Koa2/index.html b/categories/NodeJs/Koa2/index.html
index 54a74285..ebfad295 100644
--- a/categories/NodeJs/Koa2/index.html
+++ b/categories/NodeJs/Koa2/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Koa2</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Koa2</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Koa2</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Koa2</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/NodeJs/Web\346\234\215\345\212\241\345\231\250/index.html" "b/categories/NodeJs/Web\346\234\215\345\212\241\345\231\250/index.html"
index 020b4169..553bf7bd 100644
--- "a/categories/NodeJs/Web\346\234\215\345\212\241\345\231\250/index.html"
+++ "b/categories/NodeJs/Web\346\234\215\345\212\241\345\231\250/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Web服务器</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Web服务器</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Web服务器</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Web服务器</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/NodeJs/index.html b/categories/NodeJs/index.html
index b10d05a1..5e15cd60 100644
--- a/categories/NodeJs/index.html
+++ b/categories/NodeJs/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - NodeJs</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/categories/NodeJs/page/2/">2</a><a class="extend next" rel="next" href="/categories/NodeJs/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - NodeJs</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/categories/NodeJs/page/2/">2</a><a class="extend next" rel="next" href="/categories/NodeJs/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/NodeJs/mysql/index.html b/categories/NodeJs/mysql/index.html
index 524f2e05..d2cc121f 100644
--- a/categories/NodeJs/mysql/index.html
+++ b/categories/NodeJs/mysql/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">mysql</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - mysql</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">mysql</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - mysql</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/NodeJs/nvm/index.html b/categories/NodeJs/nvm/index.html
index 3cc30fa2..9e3b182f 100644
--- a/categories/NodeJs/nvm/index.html
+++ b/categories/NodeJs/nvm/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">nvm</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - nvm</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">nvm</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - nvm</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/NodeJs/page/2/index.html b/categories/NodeJs/page/2/index.html
index 3b249862..9a17b2c5 100644
--- a/categories/NodeJs/page/2/index.html
+++ b/categories/NodeJs/page/2/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - NodeJs</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/categories/NodeJs/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/categories/NodeJs/">1</a><span class="page-number current">2</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - NodeJs</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/categories/NodeJs/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/categories/NodeJs/">1</a><span class="page-number current">2</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/NodeJs/\345\206\205\347\275\256\346\250\241\345\235\227/index.html" "b/categories/NodeJs/\345\206\205\347\275\256\346\250\241\345\235\227/index.html"
index 1cab60ff..7336945a 100644
--- "a/categories/NodeJs/\345\206\205\347\275\256\346\250\241\345\235\227/index.html"
+++ "b/categories/NodeJs/\345\206\205\347\275\256\346\250\241\345\235\227/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">内置模块</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 内置模块</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">内置模块</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 内置模块</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/NodeJs/\346\234\254\345\234\260\346\234\215\345\212\241/index.html" "b/categories/NodeJs/\346\234\254\345\234\260\346\234\215\345\212\241/index.html"
index 2b8d2db8..83ed94ce 100644
--- "a/categories/NodeJs/\346\234\254\345\234\260\346\234\215\345\212\241/index.html"
+++ "b/categories/NodeJs/\346\234\254\345\234\260\346\234\215\345\212\241/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">本地服务</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 本地服务</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">本地服务</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 本地服务</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/NodeJs/\347\231\273\345\275\225\345\207\255\350\257\201/index.html" "b/categories/NodeJs/\347\231\273\345\275\225\345\207\255\350\257\201/index.html"
index 9f19248c..6ae97236 100644
--- "a/categories/NodeJs/\347\231\273\345\275\225\345\207\255\350\257\201/index.html"
+++ "b/categories/NodeJs/\347\231\273\345\275\225\345\207\255\350\257\201/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">登录凭证</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 登录凭证</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">登录凭证</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 登录凭证</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/PhotoShop/index.html b/categories/PhotoShop/index.html
index eb3d429e..267cb72c 100644
--- a/categories/PhotoShop/index.html
+++ b/categories/PhotoShop/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">PhotoShop</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - PhotoShop</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4c664111.html" title="PhotoShop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_13.webp" alt="PhotoShop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></div><a class="article-sort-item-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">PhotoShop</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - PhotoShop</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4c664111.html" title="PhotoShop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_13.webp" alt="PhotoShop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></div><a class="article-sort-item-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/TypeScript/index.html b/categories/TypeScript/index.html
index 12b60be6..84305a1b 100644
--- a/categories/TypeScript/index.html
+++ b/categories/TypeScript/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">TypeScript</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - TypeScript</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7067fd0d.html" title="TypeScript"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_16.webp" alt="TypeScript" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></div><a class="article-sort-item-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">TypeScript</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - TypeScript</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7067fd0d.html" title="TypeScript"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_16.webp" alt="TypeScript" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></div><a class="article-sort-item-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/Typora/hexo/index.html b/categories/Typora/hexo/index.html
index a77943b9..324f850b 100644
--- a/categories/Typora/hexo/index.html
+++ b/categories/Typora/hexo/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">hexo</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - hexo</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">hexo</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - hexo</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/Typora/index.html b/categories/Typora/index.html
index 6208f1c8..5cf5f971 100644
--- a/categories/Typora/index.html
+++ b/categories/Typora/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Typora</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Typora</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Typora</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Typora</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/Vue3/Vue2\344\270\2163\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206/index.html" "b/categories/Vue3/Vue2\344\270\2163\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206/index.html"
index 3b9b385b..9b534e07 100644
--- "a/categories/Vue3/Vue2\344\270\2163\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206/index.html"
+++ "b/categories/Vue3/Vue2\344\270\2163\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue2与3响应式原理</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue2与3响应式原理</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue2与3响应式原理</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue2与3响应式原理</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/Vue3/Vue3-Suspense/index.html b/categories/Vue3/Vue3-Suspense/index.html
index d3cdd15a..8c000ad1 100644
--- a/categories/Vue3/Vue3-Suspense/index.html
+++ b/categories/Vue3/Vue3-Suspense/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 Suspense</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3 Suspense</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 Suspense</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3 Suspense</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/Vue3/Vue3-hook/index.html b/categories/Vue3/Vue3-hook/index.html
index 1390100a..1d6444e4 100644
--- a/categories/Vue3/Vue3-hook/index.html
+++ b/categories/Vue3/Vue3-hook/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 hook</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3 hook</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 hook</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3 hook</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/Vue3/Vue3-provide\344\270\216inject/index.html" "b/categories/Vue3/Vue3-provide\344\270\216inject/index.html"
index 278b2300..b40b0361 100644
--- "a/categories/Vue3/Vue3-provide\344\270\216inject/index.html"
+++ "b/categories/Vue3/Vue3-provide\344\270\216inject/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 provide与inject</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3 provide与inject</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 provide与inject</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3 provide与inject</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/Vue3/Vue3-setup\345\217\202\346\225\260/index.html" "b/categories/Vue3/Vue3-setup\345\217\202\346\225\260/index.html"
index 815ec4cc..7c04c23b 100644
--- "a/categories/Vue3/Vue3-setup\345\217\202\346\225\260/index.html"
+++ "b/categories/Vue3/Vue3-setup\345\217\202\346\225\260/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 setup参数</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3 setup参数</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 setup参数</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3 setup参数</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/Vue3/Vue3-watch/index.html b/categories/Vue3/Vue3-watch/index.html
index 0bcc872b..3f52c4c6 100644
--- a/categories/Vue3/Vue3-watch/index.html
+++ b/categories/Vue3/Vue3-watch/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 watch</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3 watch</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 watch</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3 watch</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/Vue3/Vue3\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256/index.html" "b/categories/Vue3/Vue3\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256/index.html"
index 87958feb..742a54cd 100644
--- "a/categories/Vue3/Vue3\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256/index.html"
+++ "b/categories/Vue3/Vue3\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3响应式数据</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3响应式数据</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3响应式数据</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3响应式数据</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/Vue3/index.html b/categories/Vue3/index.html
index 0a09153f..fae6e587 100644
--- a/categories/Vue3/index.html
+++ b/categories/Vue3/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3a42db2d.html" title="Vue3"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_20.webp" alt="Vue3" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></div><a class="article-sort-item-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - Vue3</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3a42db2d.html" title="Vue3"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_20.webp" alt="Vue3" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></div><a class="article-sort-item-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/index.html b/categories/index.html
index cf66d557..d8852fdd 100644
--- a/categories/index.html
+++ b/categories/index.html
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">分类</h1></div></header><main class="layout" id="content-inner"><div id="page"><div class="category-lists"><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Echarts/">Echarts</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/">JS</a><span class="category-list-count">18</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JS/Blob/">Blob</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/">文件下载</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/Dom/">Dom</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/">Dom尺寸与位置</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/EventLoop/">EventLoop</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/">JSON.stringify 深拷贝弊端</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/https/">https</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/this%E6%8C%87%E5%90%91/">this指向</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/websocket/">websocket</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E5%8E%9F%E5%9E%8B/">原型</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E5%8E%9F%E5%9E%8B/%E5%8E%9F%E5%9E%8B%E9%93%BE/">原型链</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/">图片懒加载</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E5%BC%82%E6%AD%A5%E5%A4%84%E7%90%86/">异步处理</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E6%8B%96%E6%8B%BD/">拖拽</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/">栈内存和堆内存</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/">深浅拷贝</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">箭头函数</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E8%B7%A8%E5%9F%9F/">跨域</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/">面向对象</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/">预解析</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/">作用域链</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Nginx/">Nginx</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/">NodeJs</a><span class="category-list-count">11</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/CommonJs/">CommonJs</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/CommonJs/ES6/">ES6</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/Express/">Express</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/Express1/">Express1</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/Koa2/">Koa2</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/mysql/">mysql</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/nvm/">nvm</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/">内置模块</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1/">本地服务</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81/">登录凭证</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/PhotoShop/">PhotoShop</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Typora/">Typora</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Typora/hexo/">hexo</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/">Vue2与3响应式原理</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3-Suspense/">Vue3 Suspense</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3-hook/">Vue3 hook</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3-provide%E4%B8%8Einject/">Vue3 provide与inject</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3-setup%E5%8F%82%E6%95%B0/">Vue3 setup参数</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3-watch/">Vue3 watch</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/">Vue3响应式数据</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/webpack/">webpack</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%BC%80%E6%9C%BA%E8%87%AA%E5%90%AF/">开机自启</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/">网络安全</a><span class="category-list-count">1</span></li></ul></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">分类</h1></div></header><main class="layout" id="content-inner"><div id="page"><div class="category-lists"><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Echarts/">Echarts</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/">JS</a><span class="category-list-count">18</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JS/Blob/">Blob</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/">文件下载</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/Dom/">Dom</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/">Dom尺寸与位置</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/EventLoop/">EventLoop</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/">JSON.stringify 深拷贝弊端</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/https/">https</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/this%E6%8C%87%E5%90%91/">this指向</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/websocket/">websocket</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E5%8E%9F%E5%9E%8B/">原型</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E5%8E%9F%E5%9E%8B/%E5%8E%9F%E5%9E%8B%E9%93%BE/">原型链</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/">图片懒加载</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E5%BC%82%E6%AD%A5%E5%A4%84%E7%90%86/">异步处理</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E6%8B%96%E6%8B%BD/">拖拽</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/">栈内存和堆内存</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/">深浅拷贝</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">箭头函数</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E8%B7%A8%E5%9F%9F/">跨域</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/">面向对象</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/">预解析</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/">作用域链</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Nginx/">Nginx</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/">NodeJs</a><span class="category-list-count">11</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/CommonJs/">CommonJs</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/CommonJs/ES6/">ES6</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/Express/">Express</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/Express1/">Express1</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/Koa2/">Koa2</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/mysql/">mysql</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/nvm/">nvm</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/">内置模块</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1/">本地服务</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJs/%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81/">登录凭证</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/PhotoShop/">PhotoShop</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Typora/">Typora</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Typora/hexo/">hexo</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/">Vue2与3响应式原理</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3-Suspense/">Vue3 Suspense</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3-hook/">Vue3 hook</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3-provide%E4%B8%8Einject/">Vue3 provide与inject</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3-setup%E5%8F%82%E6%95%B0/">Vue3 setup参数</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3-watch/">Vue3 watch</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/">Vue3响应式数据</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/webpack/">webpack</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%BC%80%E6%9C%BA%E8%87%AA%E5%90%AF/">开机自启</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/">网络安全</a><span class="category-list-count">1</span></li></ul></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/categories/webpack/index.html b/categories/webpack/index.html
index c5600666..e256cb86 100644
--- a/categories/webpack/index.html
+++ b/categories/webpack/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">webpack</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - webpack</div><div class="article-sort"><div class="article-sort-item year">2024</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" alt="webpack" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div><a class="article-sort-item-title" href="/articles/b9f20a20.html" title="webpack">webpack</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">webpack</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - webpack</div><div class="article-sort"><div class="article-sort-item year">2024</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" alt="webpack" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div><a class="article-sort-item-title" href="/articles/b9f20a20.html" title="webpack">webpack</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/\345\274\200\346\234\272\350\207\252\345\220\257/index.html" "b/categories/\345\274\200\346\234\272\350\207\252\345\220\257/index.html"
index fc455655..758b6f54 100644
--- "a/categories/\345\274\200\346\234\272\350\207\252\345\220\257/index.html"
+++ "b/categories/\345\274\200\346\234\272\350\207\252\345\220\257/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">开机自启</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 开机自启</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">开机自启</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 开机自启</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/categories/\347\275\221\347\273\234\345\256\211\345\205\250/index.html" "b/categories/\347\275\221\347\273\234\345\256\211\345\205\250/index.html"
index c7b614c2..3386185c 100644
--- "a/categories/\347\275\221\347\273\234\345\256\211\345\205\250/index.html"
+++ "b/categories/\347\275\221\347\273\234\345\256\211\345\205\250/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">网络安全</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 网络安全</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" alt="网络安全修改" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div><a class="article-sort-item-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">网络安全</h1></div></header><main class="layout" id="content-inner"><div id="category"><div class="article-sort-title">分类 - 网络安全</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" alt="网络安全修改" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div><a class="article-sort-item-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/css/index.css b/css/index.css
index a5a3f0dc..c1eafab9 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1398,7 +1398,7 @@ input::placeholder {
   z-index: -999;
   width: 100%;
   height: 100%;
-  background: url(https://cdn.jsdelivr.net/gh/fsllala/img@main/1656259577697headImg.jpg);
+  background: url(https://img.fsllala.top/1656259577697headImg.jpg);
   background-attachment: local;
   background-position: center;
   background-size: cover;
@@ -4411,7 +4411,7 @@ span.mathjax-overflow {
   border-radius: 5px !important;
 }
 [data-theme="dark"] #web_bg {
-  background: url(https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/yuanshen1.webp);
+  background: url(https://cover.fsllala.top/yuanshen1.webp);
   background-attachment: local;
   background-position: center;
   background-size: cover;
@@ -4419,14 +4419,14 @@ span.mathjax-overflow {
 }
 @media screen and (max-width: 800px) {
   #web_bg {
-    background: url(https://cdn.jsdelivr.net/gh/fsllala/img@main/1656259577697headImg.jpg) !important;
+    background: url(https://img.fsllala.top/1656259577697headImg.jpg) !important;
     background-attachment: local !important;
     background-position: center !important;
     background-size: cover !important;
     background-repeat: no-repeat !important;
   }
   [data-theme="dark"] #web_bg {
-    background: url(https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/yuanshen1.webp) !important;
+    background: url(https://cover.fsllala.top/yuanshen1.webp) !important;
     background-attachment: local !important;
     background-position: center !important;
     background-size: cover !important;
diff --git a/index.html b/index.html
index 051dd7b3..89118c5b 100644
--- a/index.html
+++ b/index.html
@@ -40,7 +40,7 @@
   isHome: true,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Forward の Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/articles/b9f20a20.html" title="webpack"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/b9f20a20.html" title="webpack">webpack</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/webpack/">webpack</a></span></div><div class="content">什么是Webpack
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Forward の Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/articles/b9f20a20.html" title="webpack"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/b9f20a20.html" title="webpack">webpack</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/webpack/">webpack</a></span></div><div class="content">什么是Webpack
 官网
 
 官方解释：webpack is a static module bundler for modern JavaScript applications.
@@ -154,7 +154,7 @@
 环境Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境；
 安装webpack的安装目前分为两个：webpack（代码使用）、webpack-cli（命令行使用）；
 
-这里推荐局 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/fa0f2f9c.html" title="网络安全修改"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/">网络安全</a></span></div><div class="content">背景网站做完之后，移交给第三方机构进行安全检测，对”安全功能验证观察报告”指出的问题进行了如下修改；
+这里推荐局 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/fa0f2f9c.html" title="网络安全修改"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/">网络安全</a></span></div><div class="content">背景网站做完之后，移交给第三方机构进行安全检测，对”安全功能验证观察报告”指出的问题进行了如下修改；
 接口重放什么是重放参考文献：基于timestamp和nonce的防止重放攻击方案
 
 重放攻击指的是攻击者通过发送一个目的主机已接受到的包，来达到欺骗系统的目的。其基本原理就是把窃听到的数据原封不动的重新发送给接收方(好像修改了数据在发送就不叫重放了)，即使传输的数据是加密的，窃听方不知道具体的数据内容，但是容易知道数据的作用（即使不知道作用也能对系统造成一定破坏），这时就能通过原封不动的重新发送达到一定的目的，比如：
@@ -169,7 +169,7 @@
 
 时间戳
 优点：服务端对请求时间戳进行判断，如超过半分钟，认定为重放攻击，请求无效；
-缺点：时间戳无法完全防止重放攻击。未认证系统还是可 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/5157567c.html" title="Koa2实战"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/Koa2/">Koa2</a></span></div><div class="content">koa2项目实战本文所有代码已上传：github
+缺点：时间戳无法完全防止重放攻击。未认证系统还是可 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/5157567c.html" title="Koa2实战"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/Koa2/">Koa2</a></span></div><div class="content">koa2项目实战本文所有代码已上传：github
 项目的搭建目录结构的划分
 按照功能模块划分：例如：控制器(controller)的放在一起；操作数据库(service)的放在一起……
 按照业务模块划分：一个完整的小功能放在一起；
@@ -184,7 +184,7 @@
 设置快捷启动12345// 在package.json 配置  &quot;scripts&quot;: &#123;    &quot;start&quot;: &quot;nodemon ./src/main.js&quot;  &#125;// 之后可以直接通过 npm run start 方式启动项目,不需要找目录结构了
 
 入口文件
-ma ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/65b69107.html" title="Nginx"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/65b69107.html" title="Nginx">Nginx</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Nginx/">Nginx</a></span></div><div class="content">正向代理与反向代理
+ma ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/65b69107.html" title="Nginx"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/65b69107.html" title="Nginx">Nginx</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Nginx/">Nginx</a></span></div><div class="content">正向代理与反向代理
 反向代理：服务端将请求转发给其他应用程序，比如转给Java；
 
 正向代理：客户端使用，比如vpn；
@@ -214,7 +214,7 @@
 
 在浏览器地址栏输入192.168.209.111，然后地址栏不变，但访问的是尚硅谷的网站；
 
-代理网站，地址栏url发生改变123location / &#12 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/3ef665a6.html" title="https"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/3ef665a6.html" title="https">https</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/https/">https</a></span></div><div class="content">调研背景
+代理网站，地址栏url发生改变123location / &#12 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/3ef665a6.html" title="https"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/3ef665a6.html" title="https">https</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/https/">https</a></span></div><div class="content">调研背景
 公司项目打算采用HTTPS来保证数据的安全性。在计划零成本的前提下，看是否可以实现HTTPS。
 
 HTTP与HTTPS区别
@@ -227,7 +227,7 @@
 
 
 SSL&#x2F;TLS
-SSL（Secure Sockets Layer）和 TLS（T ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/7067fd0d.html" title="TypeScript"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_16.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="TypeScript"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/TypeScript/">TypeScript</a></span></div><div class="content">TypeScript是什么
+SSL（Secure Sockets Layer）和 TLS（T ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/7067fd0d.html" title="TypeScript"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_16.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="TypeScript"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/TypeScript/">TypeScript</a></span></div><div class="content">TypeScript是什么
 TS是JS的超集，所以JS基础的类型都包含在内
 
 TypeScript开发环境搭建
@@ -248,7 +248,7 @@
 基础数据类型
 基础类型：Number、String、Boolean、null、undefined以及 ES6 的 Symbol 和 ES10 的 BigInt。
 
-字符串类型12345678let str: string = &quot;这是字符串类型&quot;;//上方我们将str这个变量定义为了string类型，如果对他输入其他类型的内容就会报错，例如：let str1: string = 666;//这个就会报错了，会提示你不能将类型&quot;number&quot;分配给类型&quot;string&quot;let muban: string = `web$&#123;str&#125;`;//我们也可以使用E ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_44.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs 登录凭证"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81/">登录凭证</a></span></div><div class="content">登录凭证
+字符串类型12345678let str: string = &quot;这是字符串类型&quot;;//上方我们将str这个变量定义为了string类型，如果对他输入其他类型的内容就会报错，例如：let str1: string = 666;//这个就会报错了，会提示你不能将类型&quot;number&quot;分配给类型&quot;string&quot;let muban: string = `web$&#123;str&#125;`;//我们也可以使用E ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_44.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs 登录凭证"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81/">登录凭证</a></span></div><div class="content">登录凭证
 登录成功返回凭证：cookie+session或者是Token令牌；现在基本都是Token令牌作为登录凭证；
 
 为什么需要登录凭证呢？
@@ -276,7 +276,7 @@
 
 
 那如何证明刚才就是我登录的啊？
-登陆成功的时候服务器给我们发过来一个登录凭证，访问其 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/46635768.html" title="NodeJs连接MySQL"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs连接MySQL"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/mysql/">mysql</a></span></div><div class="content">NodeJs连接MySQLmysql与mysql2
+登陆成功的时候服务器给我们发过来一个登录凭证，访问其 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/46635768.html" title="NodeJs连接MySQL"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs连接MySQL"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/mysql/">mysql</a></span></div><div class="content">NodeJs连接MySQLmysql与mysql2
 如何可以在Node的代码中执行SQL语句呢?这里我们可以借助于两个库：
 mysql：最早的Node连接MySQL的数据库驱动；
 mysql2：在mysql的基础之上，进行了很多的优化、改进；
@@ -300,7 +300,7 @@
 
 
 mysql2的使用过程如下：
-第 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/799084bf.html" title="NodeJs Koa2"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs Koa2"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/Koa2/">Koa2</a></span></div><div class="content">Koa2简介
+第 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/799084bf.html" title="NodeJs Koa2"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_9.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs Koa2"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/Koa2/">Koa2</a></span></div><div class="content">Koa2简介
 官网
 koa2是express同一个团队开发的一个新的Web框架；
 相对于express具有更强的异步处理能力；**(Koa框架的next()函数返回的是一个promise)**
@@ -326,7 +326,7 @@
 ctx.req：（Node封装的请求对象）
 ctx.res：（Node封装的响应对象）
 
-1234567891011121314 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/8ba9ed2d.html" title="NodeJs Express"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs Express"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/Express/">Express</a></span></div><div class="content">Express简介
+1234567891011121314 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/8ba9ed2d.html" title="NodeJs Express"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_32.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs Express"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/Express/">Express</a></span></div><div class="content">Express简介
 Express 是一个简洁而灵活的 Node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用
 Express内部还是使用的http模块实现服务器创建和监听, 对http模块进行了二次封装
 严格上来说  express就是NodeJS的一个模块  直接下载安装
@@ -341,7 +341,7 @@
 
 使用的时候  引入  需要实例化一个express应用  使用应用对象创建各种服务
 
-express初体验12345678910111213141516171819const express = require(&quot;express&quot;);// express其实是一个函数;// 调用函数返回 app,app本质也是一个函数;const app =express();// 监听默认路径(GET)app.get(&quot;/&quot;,(req,res,next)=&gt;&#123;  ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/#content-inner">2</a><span class="space">&hellip;</span><a class="page-number" href="/page/5/#content-inner">5</a><a class="extend next" rel="next" href="/page/2/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+express初体验12345678910111213141516171819const express = require(&quot;express&quot;);// express其实是一个函数;// 调用函数返回 app,app本质也是一个函数;const app =express();// 监听默认路径(GET)app.get(&quot;/&quot;,(req,res,next)=&gt;&#123;  ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/#content-inner">2</a><span class="space">&hellip;</span><a class="page-number" href="/page/5/#content-inner">5</a><a class="extend next" rel="next" href="/page/2/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -349,8 +349,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/page/2/index.html b/page/2/index.html
index 571d25c4..aa3b8dc1 100644
--- a/page/2/index.html
+++ b/page/2/index.html
@@ -40,7 +40,7 @@
   isHome: true,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Forward の Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/articles/4dee6fea.html" title="模块化规范"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="模块化规范"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/CommonJs/">CommonJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/CommonJs/ES6/">ES6</a></span></div><div class="content">什么是模块化？
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Forward の Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/articles/4dee6fea.html" title="模块化规范"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_8.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="模块化规范"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/CommonJs/">CommonJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/CommonJs/ES6/">ES6</a></span></div><div class="content">什么是模块化？
 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块；
 将一个项目拆分为若干块，每块之间以一定的形式进行通信，而每块内部的内容都是独立的；
 
@@ -155,7 +155,7 @@
 
 
 根本原因：CommonJs中使用了Node的api，无法在浏览器中运行。
-直接原因：作为一门同 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="nvm、npm与nrm"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/nvm/">nvm</a></span></div><div class="content">nvmnvm是什么?
+直接原因：作为一门同 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="nvm、npm与nrm"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/nvm/">nvm</a></span></div><div class="content">nvmnvm是什么?
 nvm(node.js version manager)即nodejs版本管理器；可以简单操作node版本的切换、安装、查看。。。等等；与npm不同的是，npm是依赖包的管理工具。
 
 为什么需要用nvm?
@@ -173,7 +173,7 @@
 通过nvm -v查看是否安装成功了；通过nvm list查看当前电脑上安装了那些版本的node(因为刚才卸载了，所以现在是No installations recognized.)
 
 配置nvm：复制下面代码(配置镜像源)到nvm文件位置(过程3的第一张图)，点开setting.txt
-12node_mirror: https://npmmirror. ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/f7f97ed.html" title="文件下载"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="文件下载"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/Blob/">Blob</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/">文件下载</a></span></div><div class="content">文件下载方式
+12node_mirror: https://npmmirror. ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/f7f97ed.html" title="文件下载"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="文件下载"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/Blob/">Blob</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/">文件下载</a></span></div><div class="content">文件下载方式
 前端涉及到的文件下载还是很多应用场景的，那么前端文件下载有多少种方式呢？每种方式有什么优缺点呢？下面就来一一介绍。
 
 a标签定义与用法
@@ -185,7 +185,7 @@
 兼容性测试及结果
 代码
 
-1234567891011121314151617&lt;a href=&quot;./imgs/cs.jpg&quot;&gt;同源图片，不带download&lt;/a&gt;&lt;/br&gt;&lt;a href=&quot;./imgs/cs.jpg ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_15.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JSON.stringify 深拷贝弊端"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/">JSON.stringify 深拷贝弊端</a></span></div><div class="content">JSON.stringify 深拷贝的弊端时间对象
+1234567891011121314151617&lt;a href=&quot;./imgs/cs.jpg&quot;&gt;同源图片，不带download&lt;/a&gt;&lt;/br&gt;&lt;a href=&quot;./imgs/cs.jpg ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_15.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JSON.stringify 深拷贝弊端"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/">JSON.stringify 深拷贝弊端</a></span></div><div class="content">JSON.stringify 深拷贝的弊端时间对象
 如果 obj 里面有时间对象，则 JSON.stringify 后再 JSON.parse 的结果，时间将转为字符串的形式，而不是对象的形式
 
 123456let obj = &#123;    a:123,    b:[new Date(),new Date()]&#125;let newObj = JSON.parse(JSON.stringify(obj));console.log(obj,newObj);
@@ -198,7 +198,7 @@
 
 
 function、undefined、Symbol
- ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/e98504f5.html" title="深浅拷贝"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_28.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="深浅拷贝"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/">深浅拷贝</a></span></div><div class="content">对象的引用赋值
+ ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/e98504f5.html" title="深浅拷贝"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_28.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="深浅拷贝"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/">深浅拷贝</a></span></div><div class="content">对象的引用赋值
 js中一旦遇到引用数据类型，就会开辟一块堆内存，将引用数据类型的值进行储存，并给这块堆内存分配一个16进制地址。
 
 1234const info = &#123;name:&quot;forward&quot;,age:24&#125;;const obj = info;obj.age=23;console.log(info.age);//23
@@ -214,7 +214,7 @@
 concat()
 slice() 返回一个新的数组对象；原始数组不会被改变。
 …拓展运算符
-Lod ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/6e473482.html" title="栈内存和堆内存"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_37.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="栈内存和堆内存"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/">栈内存和堆内存</a></span></div><div class="content">栈内存和堆内存
+Lod ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/6e473482.html" title="栈内存和堆内存"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_37.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="栈内存和堆内存"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/">栈内存和堆内存</a></span></div><div class="content">栈内存和堆内存
 我们知道程序是需要加载到内存中来执行的，我们可以将内存划分为两个区域：栈内存和堆内存。
 
 
@@ -238,7 +238,7 @@
 
 
 
-12345678910const name = &quot;fsllala&quot;;con ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/58add7e9.html" title="跨域"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_29.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="跨域"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/58add7e9.html" title="跨域">跨域</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E8%B7%A8%E5%9F%9F/">跨域</a></span></div><div class="content">什么是跨域
+12345678910const name = &quot;fsllala&quot;;con ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/58add7e9.html" title="跨域"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_29.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="跨域"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/58add7e9.html" title="跨域">跨域</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E8%B7%A8%E5%9F%9F/">跨域</a></span></div><div class="content">什么是跨域
 由于浏览器的同源策略限制，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同时，需要跨域才能成功访问；
 
 同源策略是浏览器的行为，是浏览器最核心也最基本的安全功能；
@@ -249,7 +249,7 @@
 
 误区：前端通过jsonp解决跨域原生写法123456789101.创建一个script标签	var os=document.createElement(&quot;script&quot;)2.给script一个src,src就是地址	os.src=&quot;http://suggestion.baidu.com/su?cb=qwer&amp;wd=123&quot;3.将script插入到页面	document.body.appendChild(os)4.回调函数处理数据	function qwer(d)&#123;    	//d就是后端返回的数据  &#125;
 
-ajax请求12345678910111213141516$.ajax(&#123;    url:&quot;http://suggestion.baidu.com ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/5ca213d8.html" title="Vue3 Suspense"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_25.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3 Suspense"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3-Suspense/">Vue3 Suspense</a></span></div><div class="content">Suspense
+ajax请求12345678910111213141516$.ajax(&#123;    url:&quot;http://suggestion.baidu.com ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/5ca213d8.html" title="Vue3 Suspense"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_25.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3 Suspense"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3-Suspense/">Vue3 Suspense</a></span></div><div class="content">Suspense
 等待异步组件时渲染一些额外内容，让应用有更好的用户体验(内置组件，不需要引入)
 其实和2.x中的路由懒加载差不多
 
@@ -259,17 +259,17 @@
 
 1234567891011121314&lt;template&gt;&lt;!-- 父组件 --&gt;  &lt;h1&gt;this is parent&lt;/h1&gt;  &lt;i-son&gt;&lt;/i-son&gt;&lt;/template&gt;&lt;script&gt;import iSon from &quot;./injectSon.vue&quot;;export default &#123;  components: &#123;iSon&#125;,&#125;;&lt;/script&gt;&lt;style&gt;&lt;/style&gt;
 
-123456789101112&lt ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_22.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3 provide与inject"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3-provide%E4%B8%8Einject/">Vue3 provide与inject</a></span></div><div class="content">provide与inject
+123456789101112&lt ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_22.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3 provide与inject"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3-provide%E4%B8%8Einject/">Vue3 provide与inject</a></span></div><div class="content">provide与inject
 作用： 实现祖孙组件的通信(其实 所有的后代都能接受到数据，隔了多少代都可以，一代也不搁的也可以)
 用法：父组件有一个provide来提供数据，后代组件有一个inject来接收数据；
 
-12345678910111213141516171819202122232425262728293031&lt;template&gt;&lt;!-- 爷爷组件 --&gt;  &lt;h1&gt;this is grandParent&lt;/h1&gt;  &lt;h3&gt;&#123;&#123;name&#125;&#125;&lt;/h3&gt;  &lt;h3&gt;&#123;&#123;price&#125;&#125;&lt;/h3&gt;  &lt;i-son&gt;&lt;/i-son&gt;&lt;/template&gt;&lt;script&gt;import &#123; provide, reactive, toRefs &#125; from &quot;vue&quot;;import iSon from &quot;./inject ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/7db1b1fe.html" title="Vue3 watch"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_18.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3 watch"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3-watch/">Vue3 watch</a></span></div><div class="content">watch
+12345678910111213141516171819202122232425262728293031&lt;template&gt;&lt;!-- 爷爷组件 --&gt;  &lt;h1&gt;this is grandParent&lt;/h1&gt;  &lt;h3&gt;&#123;&#123;name&#125;&#125;&lt;/h3&gt;  &lt;h3&gt;&#123;&#123;price&#125;&#125;&lt;/h3&gt;  &lt;i-son&gt;&lt;/i-son&gt;&lt;/template&gt;&lt;script&gt;import &#123; provide, reactive, toRefs &#125; from &quot;vue&quot;;import iSon from &quot;./inject ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/7db1b1fe.html" title="Vue3 watch"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_18.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3 watch"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3-watch/">Vue3 watch</a></span></div><div class="content">watch
 监听响应式数据的变化，才能够被watch所监听到；
 
 vue2.xvue3.0vue2中的watch函数
 vue2中的响应式数据是写在data、computed或者props接收的数据；才能够被watch所监听到
 
-基本写法123456789101112131415161718192021222324&lt;template&gt;  &lt;div&gt;    &lt;h2&gt;&#123;&#123; sum &#125;&#125;&lt;/h2&gt;    &lt;button @click=&quot;sum++&quot;&gt;点我加一&lt;/button&gt;  &lt;/div&gt;&lt;/template&gt;&lt;script&gt;export default &#123;  data() &#123;    return &#123;      sum: 1,    &#125;;  &#125;,  watch: &#123;    sum(newValue, oldValue) &#123;      console.log( ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/#content-inner">3</a><span class="space">&hellip;</span><a class="page-number" href="/page/5/#content-inner">5</a><a class="extend next" rel="next" href="/page/3/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+基本写法123456789101112131415161718192021222324&lt;template&gt;  &lt;div&gt;    &lt;h2&gt;&#123;&#123; sum &#125;&#125;&lt;/h2&gt;    &lt;button @click=&quot;sum++&quot;&gt;点我加一&lt;/button&gt;  &lt;/div&gt;&lt;/template&gt;&lt;script&gt;export default &#123;  data() &#123;    return &#123;      sum: 1,    &#125;;  &#125;,  watch: &#123;    sum(newValue, oldValue) &#123;      console.log( ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/#content-inner">3</a><span class="space">&hellip;</span><a class="page-number" href="/page/5/#content-inner">5</a><a class="extend next" rel="next" href="/page/3/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -277,8 +277,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/page/3/index.html b/page/3/index.html
index 8d0785a6..9e8519be 100644
--- a/page/3/index.html
+++ b/page/3/index.html
@@ -40,7 +40,7 @@
   isHome: true,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Forward の Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/articles/1c4c16aa.html" title="Vue3 hook"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_21.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3 hook"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3-hook/">Vue3 hook</a></span></div><div class="content">自定义hook
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Forward の Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/articles/1c4c16aa.html" title="Vue3 hook"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_21.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3 hook"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3-hook/">Vue3 hook</a></span></div><div class="content">自定义hook
 本质是一个函数，把setup函数中使用的 Composition API 进行了封装；
 类似于2.x中 的mixin；
 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂；
@@ -141,7 +141,7 @@
 
 实现一个获取坐标位置的功能
 
-123456789101112131415161718192021222324252627282930313233343536&lt;template&gt;  &lt;h2&gt;点前点击的鼠标的坐标为x:&#123;&#123; point.x &#125;&#125;,y:&#123;&#123; point.y &#125;&#125;&lt;/h2&gt;&lt;/template&gt;&lt;script&gt;// 获取鼠标的点击的坐标import &#123; reactive, onMounted,onBeforeUnmount &#125; from &quot;vue&quot;;export default &#123;  setup() &#123;    // 数据    let point = reactive(&#123 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/459aa16c.html" title="Vue3 setup参数"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_24.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3 setup参数"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3-setup%E5%8F%82%E6%95%B0/">Vue3 setup参数</a></span></div><div class="content">setupVue2中的组件传值
+123456789101112131415161718192021222324252627282930313233343536&lt;template&gt;  &lt;h2&gt;点前点击的鼠标的坐标为x:&#123;&#123; point.x &#125;&#125;,y:&#123;&#123; point.y &#125;&#125;&lt;/h2&gt;&lt;/template&gt;&lt;script&gt;// 获取鼠标的点击的坐标import &#123; reactive, onMounted,onBeforeUnmount &#125; from &quot;vue&quot;;export default &#123;  setup() &#123;    // 数据    let point = reactive(&#123 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/459aa16c.html" title="Vue3 setup参数"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_24.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3 setup参数"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3-setup%E5%8F%82%E6%95%B0/">Vue3 setup参数</a></span></div><div class="content">setupVue2中的组件传值
 父传子 $attrs
 
 1234567891011121314151617//父组件&lt;template&gt;  &lt;v-child msg=&quot;hello&quot; school=&quot;vue2父传子&quot;&gt;&lt;/v-child&gt;&lt;/template&gt;&lt;script&gt;import vChild from &quot;./theChild.vue&quot;export default &#123;    components:&#123;        vChild    &#125;&#125;&lt;/script&gt;&lt;style&gt;&lt;/style&gt;
@@ -149,19 +149,19 @@
 
 子组件
 
-123456789101112131415&lt;template&gt;  &lt;h2&gt;this is child&lt;/h2&gt;&lt;/template&gt;&lt;script&gt;export default &#123;    props:[&quot;msg& ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_19.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue2与3响应式原理"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/">Vue2与3响应式原理</a></span></div><div class="content">vue2响应式原理
+123456789101112131415&lt;template&gt;  &lt;h2&gt;this is child&lt;/h2&gt;&lt;/template&gt;&lt;script&gt;export default &#123;    props:[&quot;msg& ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_19.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue2与3响应式原理"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/">Vue2与3响应式原理</a></span></div><div class="content">vue2响应式原理
 通过Object.defineProperty()对属性的读取，修改进行数据劫持；
 get捕获 获取的数据；set捕获 修改的数据；但是添加和删除属性是捕获不到的；
 
 12345// 给哪个对象追加属性,追加什么属性,对象 get 和set方法Object.defineProperties(p,&quot;name&quot;,&#123;get()&#123;&#125;,set()&#123;&#125;&#125;)
 
-1234567891011121314151617181920212223242526272829// 源数据let person=&#123;    name:&quot;张三&quot;,    age:20&#125;;// 模拟vue2实现响应式// 1.准备一个空对象let p = &#123;&#125;;// 给哪个对象追加属性,追加什么属性,对象 get 和set方法Object.defineProperty(p,&quot;name&quot;,&#123;    get()&#123;//有人读取name时使用        ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/d61e2f28.html" title="Vue3响应式数据"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_23.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3响应式数据"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/">Vue3响应式数据</a></span></div><div class="content">ref函数
+1234567891011121314151617181920212223242526272829// 源数据let person=&#123;    name:&quot;张三&quot;,    age:20&#125;;// 模拟vue2实现响应式// 1.准备一个空对象let p = &#123;&#125;;// 给哪个对象追加属性,追加什么属性,对象 get 和set方法Object.defineProperty(p,&quot;name&quot;,&#123;    get()&#123;//有人读取name时使用        ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/d61e2f28.html" title="Vue3响应式数据"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_23.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3响应式数据"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Vue3/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/">Vue3响应式数据</a></span></div><div class="content">ref函数
 通过ref生成一个 引用对象(ref对象) ，定义一个响应式的数据
 
 
 传统写法：打印输出的值 是 李四，但是页面数据不变–&gt;数据不是响应式的–&gt;通过ref转为响应式
 
-123456789101112131415161718192021222324&lt;template&gt;  &lt;h2&gt;&#123;&#123;name&#125;&#125;&lt;/h2&gt;  &lt;h2&gt;&#123;&#123;age&#125;&#125;&lt;/h2&gt;  &lt;button @click=&quot;changeValue&quot;&gt;button&lt;/button&gt;&lt;/template&gt;&lt;script&gt;export default &#123;    setup()&#123;        let name = &quot;张三&quot;;        let age = 20;        let changeValue=()=&gt;&#123;            name=& ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/3a42db2d.html" title="Vue3"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_20.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a></span></div><div class="content">Vue3Vue3介绍
+123456789101112131415161718192021222324&lt;template&gt;  &lt;h2&gt;&#123;&#123;name&#125;&#125;&lt;/h2&gt;  &lt;h2&gt;&#123;&#123;age&#125;&#125;&lt;/h2&gt;  &lt;button @click=&quot;changeValue&quot;&gt;button&lt;/button&gt;&lt;/template&gt;&lt;script&gt;export default &#123;    setup()&#123;        let name = &quot;张三&quot;;        let age = 20;        let changeValue=()=&gt;&#123;            name=& ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/3a42db2d.html" title="Vue3"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_20.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue3/">Vue3</a></span></div><div class="content">Vue3Vue3介绍
 Vue.JS 3.0兼容2.0的大多数语法。
 
 性能提升
@@ -179,7 +179,7 @@
 
 
 
-1234567891011121314151617181920212223242526272829303132333435363738394041424344454647&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;    &lt;meta charset=&quot;UTF-8&quot;&gt;    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, i ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/facd74f4.html" title="Echarts"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_2.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Echarts"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Echarts/">Echarts</a></span></div><div class="content">Echarts一个基于 JavaScript 的开源可视化图表库。
+1234567891011121314151617181920212223242526272829303132333435363738394041424344454647&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;    &lt;meta charset=&quot;UTF-8&quot;&gt;    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, i ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/facd74f4.html" title="Echarts"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_2.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Echarts"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Echarts/">Echarts</a></span></div><div class="content">Echarts一个基于 JavaScript 的开源可视化图表库。
 安装方式12345npm init -y   //初始化项目 npm install echarts --save  //下载echarts//ps:原生是不能用npm的;npm导入的得是带有打包工具的,比如webpack;//原生可以在官网--&gt;入门篇--&gt;获取Echarts--&gt;从 CDN 获取--&gt;最上面的/dist/echarts.min.js--&gt;打开之后右键--&gt;另存为&lt;script src=&quot;./echarts.min.js&quot;&gt;&lt;/script&gt;
 
 快速上手参考echarts官网上的快速上手
@@ -190,7 +190,7 @@
 
 1&lt;div id=&quot;box&quot; style=&quot;width:500px;height:500px&quot;&gt;&lt;/div&gt;
 
-123456789101112131415161718192021222 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/d95e4f83.html" title="NodeJs3 Express"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs3 Express"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/Express1/">Express1</a></span></div><div class="content">Express简介
+123456789101112131415161718192021222 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/d95e4f83.html" title="NodeJs3 Express"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_7.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs3 Express"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/Express1/">Express1</a></span></div><div class="content">Express简介
 Express 是一个简洁而灵活的 Node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用
 Express内部还是使用的http模块实现服务器创建和监听, 对http模块进行了二次封装
 严格上来说  express就是NodeJS的一个模块  直接下载安装
@@ -209,11 +209,11 @@
 只会执行第一次响应的内容  
 使用send的时候  不需要设置头信息  直接使用就可以
 
-12345678910111213const express = require(&quot;express&quot;);// 创建一个应用 (不用new)let app = express();// 测试一个w ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_6.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs2服务器"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a></span></div><div class="content">NodeJs服务器创建服务器res.end()；里面的内容可以展示在定义的接口网页中。
+12345678910111213const express = require(&quot;express&quot;);// 创建一个应用 (不用new)let app = express();// 测试一个w ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_6.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs2服务器"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a></span></div><div class="content">NodeJs服务器创建服务器res.end()；里面的内容可以展示在定义的接口网页中。
 
 method1：
 
-1234567891011121314151617181920212223/** * 使用核心模块http模块进行创建 * 涉及到的方法有: * createServer  创建一个Web服务器  内置一个参数  参数是回调函数  可以不传递参数 * listen方法  这个是服务器的listen方法  主要进行监听 *  */const http = require(&#x27;http&#x27;);// 创建服务器  使用createServer方法// 内置一个参数  参数是回调函数  回调内置两个参数// 第一个参数是请求   第二个参数是响应// 返回值是服务器对象let server = http.createServer((req, res) =&gt; &#123;    res.end(&quot;hello World&quot;)&#125;)// 进行监听  设定浏览器访问的IP和端口// 使用listen方法  内置三个参数// 第一个参数是端口号  ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_5.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs1内置模块"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/">内置模块</a></span></div><div class="content">NodeJs内置模块
+1234567891011121314151617181920212223/** * 使用核心模块http模块进行创建 * 涉及到的方法有: * createServer  创建一个Web服务器  内置一个参数  参数是回调函数  可以不传递参数 * listen方法  这个是服务器的listen方法  主要进行监听 *  */const http = require(&#x27;http&#x27;);// 创建服务器  使用createServer方法// 内置一个参数  参数是回调函数  回调内置两个参数// 第一个参数是请求   第二个参数是响应// 返回值是服务器对象let server = http.createServer((req, res) =&gt; &#123;    res.end(&quot;hello World&quot;)&#125;)// 进行监听  设定浏览器访问的IP和端口// 使用listen方法  内置三个参数// 第一个参数是端口号  ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_5.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs1内置模块"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/">内置模块</a></span></div><div class="content">NodeJs内置模块
 Tips：内置模块：下载NodeJs自带的模块，无需二次下载。
 
 fs模块文件操作都是基于fs模块。
@@ -221,11 +221,11 @@
 1234567//找不到 字符串 是 undefined ; 找不到 对象 是 null;let fs = require(&quot;fs&quot;);let result = fs.readFileSync(&quot;./文本ing.txt&quot;,&#123;encoding:&quot;utf-8&quot;&#125;);let results = fs.readFileSync(&quot;./文本ing.txt&quot;,&#x27;utf-8&#x27;);console.log(result);console.log(results);console.log(&quot;后续的代码!&quot;);
 
 
-现象：由于是同步读取，会进行代码阻塞，先读取文 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/e8f85541.html" title="原型与原型链"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="原型与原型链"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E5%8E%9F%E5%9E%8B/">原型</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E5%8E%9F%E5%9E%8B/%E5%8E%9F%E5%9E%8B%E9%93%BE/">原型链</a></span></div><div class="content">原型构造函数创建对象12345function Person(name) &#123;    this.name = name;&#125;;var person1 = new Person(&quot;zs&quot;);console.log(person1.name)
+现象：由于是同步读取，会进行代码阻塞，先读取文 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/e8f85541.html" title="原型与原型链"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_36.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="原型与原型链"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E5%8E%9F%E5%9E%8B/">原型</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E5%8E%9F%E5%9E%8B/%E5%8E%9F%E5%9E%8B%E9%93%BE/">原型链</a></span></div><div class="content">原型构造函数创建对象12345function Person(name) &#123;    this.name = name;&#125;;var person1 = new Person(&quot;zs&quot;);console.log(person1.name)
 
 在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。很简单吧，接下来进入正题：
 prototype每个函数或者类(其实本质就是一个函数)都天生自带prototype属性，prototype是对象数据类型。
-12345678910function Person() &#123;&#125;// 虽然写在注释里，但是你要注意：// prototype是函数才会有的属性Person.prototype.name = &#x27;zs&#x27;;var person1 = new Person();var person2 = new Person();console.log(person1.name) // zsconsole.log(person2.name) // zs ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/page/2/#content-inner"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/#content-inner">2</a><span class="page-number current">3</span><a class="page-number" href="/page/4/#content-inner">4</a><a class="page-number" href="/page/5/#content-inner">5</a><a class="extend next" rel="next" href="/page/4/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+12345678910function Person() &#123;&#125;// 虽然写在注释里，但是你要注意：// prototype是函数才会有的属性Person.prototype.name = &#x27;zs&#x27;;var person1 = new Person();var person2 = new Person();console.log(person1.name) // zsconsole.log(person2.name) // zs ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/page/2/#content-inner"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/#content-inner">2</a><span class="page-number current">3</span><a class="page-number" href="/page/4/#content-inner">4</a><a class="page-number" href="/page/5/#content-inner">5</a><a class="extend next" rel="next" href="/page/4/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -233,8 +233,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/page/4/index.html b/page/4/index.html
index a73b307e..4971cfd8 100644
--- a/page/4/index.html
+++ b/page/4/index.html
@@ -40,7 +40,7 @@
   isHome: true,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Forward の Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/articles/28239a8d.html" title="面向对象"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="面向对象"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/">面向对象</a></span></div><div class="content">概念在javaScript中我们我们有两大编程思想，面向过程（POP）和 面向对象（OOP）；
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Forward の Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/articles/28239a8d.html" title="面向对象"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_31.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="面向对象"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/">面向对象</a></span></div><div class="content">概念在javaScript中我们我们有两大编程思想，面向过程（POP）和 面向对象（OOP）；
 
 面向过程：关心的是代码每一步的的实现，先去做什么然后再做什么
 
@@ -156,7 +156,7 @@
 当我们创建一个实例(对象)的同时，他会被自动调用，即出现new的时候，构造器自动执行；
 每个类都有构造器，即使我们不定义构造器也存在，为空
 构造器的方法是固定的，为constructor
-因为class类 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/df38ec5a.html" title="EventLoop"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="EventLoop"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/EventLoop/">EventLoop</a></span></div><div class="content">EventLoop(事件循环)概念：首先我们需要知道JS是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。
+因为class类 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/df38ec5a.html" title="EventLoop"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_3.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="EventLoop"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/EventLoop/">EventLoop</a></span></div><div class="content">EventLoop(事件循环)概念：首先我们需要知道JS是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。
 
 导图要表达的内容用文字来表述的话：
 
@@ -171,7 +171,7 @@
 计时完成后需要执行的任务 ：setTimeout、setInterval&#96;；
 网络通信完成后需要执行的任务 ： XHR、Fetch；
 用户操作后需要执行的任务： addEventListener；
-如果让渲染主线程等待 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/ef0a4464.html" title="拖拽"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_33.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="拖拽"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E6%8B%96%E6%8B%BD/">拖拽</a></span></div><div class="content">拖拽位置信息
+如果让渲染主线程等待 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/ef0a4464.html" title="拖拽"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_33.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="拖拽"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E6%8B%96%E6%8B%BD/">拖拽</a></span></div><div class="content">拖拽位置信息
 clientX &#x2F; clientY       获取距离可视区域的距离；
 pageX &#x2F; pageY        获取距离文档的（没有滚动条的时候与client一样）；
 screenX &#x2F; screenY  获取距离屏幕 （指的电脑屏幕）；
@@ -189,7 +189,7 @@
 获取拖拽后元素距离body的距离 (offset不行)
 
 
-第一版代码123456789101112131415&lt;style&gt;    * &#123;        padding: 0;        margin: 0;    &#125;    .box &#123;        width: 100px;        height: 100px;        background-color: red;        position: absolu ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/3d72a2c2.html" title="懒加载"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_30.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="懒加载"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/">图片懒加载</a></span></div><div class="content">懒加载页面运行到浏览器，图片是不立即进行加载的。
+第一版代码123456789101112131415&lt;style&gt;    * &#123;        padding: 0;        margin: 0;    &#125;    .box &#123;        width: 100px;        height: 100px;        background-color: red;        position: absolu ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/3d72a2c2.html" title="懒加载"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_30.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="懒加载"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/">图片懒加载</a></span></div><div class="content">懒加载页面运行到浏览器，图片是不立即进行加载的。
 懒加载的优势
 保证图片一定能够加载成功，防止破图，增强用户体验。
 有利于性能优化。
@@ -208,7 +208,7 @@
 将真实图片的地址赋值给当前这个临时图片的src；
 判断当前这个图片资源是否加载成功；
 
-1234567891011121314151617181920212223&lt;style&gt;    * &#123;        padding: 0;        margin: 0;    &#125;    .box &#123;        width: 200px;        height: 200px;        /* 1.先弄一个占位背景图 */        back ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/16b55383.html" title="Dom尺寸与位置"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_4.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Dom尺寸与位置"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/">Dom尺寸与位置</a></span></div><div class="content">浏览器
+1234567891011121314151617181920212223&lt;style&gt;    * &#123;        padding: 0;        margin: 0;    &#125;    .box &#123;        width: 200px;        height: 200px;        /* 1.先弄一个占位背景图 */        back ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/16b55383.html" title="Dom尺寸与位置"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_4.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Dom尺寸与位置"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/">Dom尺寸与位置</a></span></div><div class="content">浏览器
 整个屏幕的尺寸：window.screen.width/height；
 浏览器的尺寸：window.outerWidth/outerHeight；
 浏览器内部尺寸(包括滚定条)：window.innerWidth/innerHeight；
@@ -223,7 +223,7 @@
 
 offset系列
 offsetWidth：clientWidth+左右边框；clientWidth + border-left + border-right+滚动条(如果有)
-offsetHeight：clientH ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/59b49683.html" title="Dom"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_1.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Dom"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/59b49683.html" title="Dom">Dom</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/Dom/">Dom</a></span></div><div class="content">Dom文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口(API)。 (DOM就是用来处理HTML机构)。
+offsetHeight：clientH ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/59b49683.html" title="Dom"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_1.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Dom"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/59b49683.html" title="Dom">Dom</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/Dom/">Dom</a></span></div><div class="content">Dom文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口(API)。 (DOM就是用来处理HTML机构)。
 节点加载HTML页面时，web浏览器生成一个树型结构，用来表示页面内部结构，称之为DOM树，DOM将这种树型结构理解为由节点组成。
 节点属性
 
@@ -260,7 +260,7 @@
 父亲节点.childNodes; 获取直接子节点 (和结构相关结构边了这个集合也会改变：比如去掉空格或者换行就相当于去掉了文本节点text)。
 获取子节点，获取到了就是一个类数组集合，获取不到就是空集合。
 
-12345678910111213 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/31c1f94e.html" title="预解析"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="预解析"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/31c1f94e.html" title="预解析">预解析</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/">预解析</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/">作用域链</a></span></div><div class="content">预解析
+12345678910111213 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/31c1f94e.html" title="预解析"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="预解析"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/31c1f94e.html" title="预解析">预解析</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/">预解析</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E9%A2%84%E8%A7%A3%E6%9E%90/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/">作用域链</a></span></div><div class="content">预解析
 代码运行到浏览器，浏览器提供了一个供JS代码执行的环境(栈区)，在代码执行之前先进行预解析；预解析完成了，代码才会执行。
 预解析又称为变量提升，预解析会对所有(全局与局部)带有var和function关键字的进行预解析；
 预解析分为以下两部分：
@@ -284,7 +284,7 @@
 
 
 栗子1：
-1234567console.log(a,b); //undefined undefinedvar a = 100;var b = 200;sum(); function sum()&#123;    console.log(&quot;2022平安喜乐&quot;) //2022平 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/f2866b73.html" title="箭头函数"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="箭头函数"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">箭头函数</a></span></div><div class="content">箭头函数定义
+1234567console.log(a,b); //undefined undefinedvar a = 100;var b = 200;sum(); function sum()&#123;    console.log(&quot;2022平安喜乐&quot;) //2022平 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/f2866b73.html" title="箭头函数"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_39.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="箭头函数"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">箭头函数</a></span></div><div class="content">箭头函数定义
 箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁
 
 
@@ -296,7 +296,7 @@
 箭头函数12345//箭头函数的完整写法(和之前 函数表达式 写法类似)const foo3 = (name, age) =&gt; &#123;    console.log(&quot;箭头函数函数体代码&quot;);    console.log(name, age);&#125;
 
 箭头函数简写
-如果箭头函数只有一个参数，那么() ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/feee8227.html" title="this"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_14.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="this"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/feee8227.html" title="this">this</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/this%E6%8C%87%E5%90%91/">this指向</a></span></div><div class="content">This指向
+如果箭头函数只有一个参数，那么() ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/feee8227.html" title="this"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_14.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="this"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/feee8227.html" title="this">this</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/this%E6%8C%87%E5%90%91/">this指向</a></span></div><div class="content">This指向
 函数在调用时，JavaScript会默认给this绑定一个值；
 this 的指向不是在创建时就绑定了，而是在调用时被绑定的；
 this的绑定和定义的位置（编写的位置）没有关系；
@@ -320,7 +320,7 @@
 
 函数定义在对象中，但是独立调用
 
-12345678910111213const obj = &#123;    name: &quot;fsllala&quot;,    say: function () &#123;        console.log(&quot;say&quot;,  ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/42ce80b9.html" title="websocket"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="websocket"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/42ce80b9.html" title="websocket">websocket</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/websocket/">websocket</a></span></div><div class="content">websocket一、websocket是什么
+12345678910111213const obj = &#123;    name: &quot;fsllala&quot;,    say: function () &#123;        console.log(&quot;say&quot;,  ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/42ce80b9.html" title="websocket"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_26.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="websocket"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/42ce80b9.html" title="websocket">websocket</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/websocket/">websocket</a></span></div><div class="content">websocket一、websocket是什么
 websocket是一种网络通信协议，是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
 在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。（维基百科）
 
@@ -333,7 +333,7 @@
 区别：http是一种无状态的、无连接的单向的应用层协议、采用请求&#x2F;响应模式。即，通信请求只能由客户端发起，服务端对请求做出应答处理。
 
 无状态：协议对于事务处理没有记忆能力；在传统的方式上(long pull 与 ajax 轮询)，要不断的建立，关闭HTTP协议，由于HTTP是非状态性的，每次都要重新传输 identity info （鉴别信息），来告诉服务端你是谁。降低了效率，消耗了过多的流量&#x2F;时间。
-无连接：每次连接只处理一个请求，服务器处 ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/page/3/#content-inner"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/3/#content-inner">3</a><span class="page-number current">4</span><a class="page-number" href="/page/5/#content-inner">5</a><a class="extend next" rel="next" href="/page/5/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+无连接：每次连接只处理一个请求，服务器处 ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/page/3/#content-inner"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/3/#content-inner">3</a><span class="page-number current">4</span><a class="page-number" href="/page/5/#content-inner">5</a><a class="extend next" rel="next" href="/page/5/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -341,8 +341,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/page/5/index.html b/page/5/index.html
index 27ab7751..8458543d 100644
--- a/page/5/index.html
+++ b/page/5/index.html
@@ -40,7 +40,7 @@
   isHome: true,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Forward の Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/articles/957893b.html" title="异步处理"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="异步处理"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/957893b.html" title="异步处理">异步处理</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E5%BC%82%E6%AD%A5%E5%A4%84%E7%90%86/">异步处理</a></span></div><div class="content">回调函数
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Forward の Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/articles/957893b.html" title="异步处理"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_34.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="异步处理"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/957893b.html" title="异步处理">异步处理</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JS/">JS</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/JS/%E5%BC%82%E6%AD%A5%E5%A4%84%E7%90%86/">异步处理</a></span></div><div class="content">回调函数
 概念：一个函数作为另一个函数的参数；先执行一个函数，把他的执行结果作为另一个函数的参数；
 
 弊端：会产生回调地狱。(回调函数的层层嵌套 例如：京东首页的tab栏，家用电器里面有电视，电视里面有各种牌子，不同牌子又有不同的配色等等，类似这样下一级的参数为上一级的返回值的)
@@ -160,7 +160,7 @@
 
 因为promise是构造方法,就是一个类,所以说使用的时候需要进行实例化
 
-使用new进行实例化一 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/ee7734c7.html" title="开机自启"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_27.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="开机自启"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%BC%80%E6%9C%BA%E8%87%AA%E5%90%AF/">开机自启</a></span></div><div class="content">背景客户要求计算机开启，自动执行bat文件。
+使用new进行实例化一 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/ee7734c7.html" title="开机自启"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_27.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="开机自启"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%BC%80%E6%9C%BA%E8%87%AA%E5%90%AF/">开机自启</a></span></div><div class="content">背景客户要求计算机开启，自动执行bat文件。
 步骤方法一：使用bat
 win+R： shell:startup,打开的路径所存放的软件电脑在开机的时候会自动运行。
 
@@ -180,7 +180,7 @@
 在这个路径下新建文件夹,后缀改为vbs,然后文件–&gt;另存为–&gt;保存类型选所有文件–&gt;编码选ANSI(这里可能会出现问题,见后文)。
 
 输入如下代码：
-123456/*bat文件可能会闪退,目前还不知道为啥路径两边的三 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/4c664111.html" title="PhotoShop"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_13.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="PhotoShop"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/PhotoShop/">PhotoShop</a></span></div><div class="content">图片背景设置为透明色
+123456/*bat文件可能会闪退,目前还不知道为啥路径两边的三 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/4c664111.html" title="PhotoShop"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_13.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="PhotoShop"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/PhotoShop/">PhotoShop</a></span></div><div class="content">图片背景设置为透明色
 文件–&gt;打开–&gt;图片。
 按住Ctrl+J来复制图层。
 选择魔棒工具，然后点击图片。
@@ -189,14 +189,14 @@
 将ps中右下角的背景的小眼睛去掉
 将图片的格式另存为PNG格式（JPG格式的图片背景会默认为白色，所以保存时不能保存为JPG格式）
 
-</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/73805dbf.html" title="NodeJs起本地服务"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs起本地服务"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1/">本地服务</a></span></div><div class="content">搭建背景客户定制了静态页，我需要将写好的本地文件放置到客户的Windows Server 2016的服务器操作系统上，进而实现局域网的访问。
+</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/articles/73805dbf.html" title="NodeJs起本地服务"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_11.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NodeJs起本地服务"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/NodeJs/">NodeJs</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/NodeJs/%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1/">本地服务</a></span></div><div class="content">搭建背景客户定制了静态页，我需要将写好的本地文件放置到客户的Windows Server 2016的服务器操作系统上，进而实现局域网的访问。
 NodeJs   Express框架Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。
 搭建步骤安装NodeJs官网下载NodeJs,安装即可。
 安装 Express安装 Express 并将其保存到依赖列表中：(这里如果是在桌面新建了一个文件夹，然后在文件夹里面cmd，输入如下命令后，文件夹内不会出现node_modules目录，而是在 “C盘–&gt;用户–&gt;现在登录的用户”的目录下)
 npm install express --save
 以上命令会将 Express 框架安装在当前目录的 node_modules 目录中， node_modules 目录下会自动创建 express 目录。安装完后，我们可以查看下 express 使用的版本号：
 npm list express
-创建e ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/12a67745.html" title="Typora常用快捷键"><img class="post_bg" src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_17.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Typora常用快捷键"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Typora/">Typora</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Typora/hexo/">hexo</a></span></div><div class="content">Typora一款编写Markdown的软件
+创建e ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/articles/12a67745.html" title="Typora常用快捷键"><img class="post_bg" src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_17.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Typora常用快捷键"></a></div><div class="recent-post-info"><a class="article-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Typora/">Typora</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/Typora/hexo/">hexo</a></span></div><div class="content">Typora一款编写Markdown的软件
 常用快捷键标题的使用# 一阶标题 或者快捷键Ctrl+1
 ##二阶标题 或者快捷键Ctrl+2
 ###三阶标题 或者快捷键Ctrl+3
@@ -224,7 +224,7 @@
 插入代码一行代码：可以使用段内代码块来表示，用一对 **&#96;**（数字1旁边的符号）括住代码。
 代码段：可以使用三个 &#96; 加Enter&#x2F;空格+编程语言来表示。
 插入图片ctrl + shift + I
-1234![alt 属性文本](图片地址)![alt 属性文本]( ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/page/4/#content-inner"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/4/#content-inner">4</a><span class="page-number current">5</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+1234![alt 属性文本](图片地址)![alt 属性文本]( ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/page/4/#content-inner"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/4/#content-inner">4</a><span class="page-number current">5</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -232,8 +232,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/search.xml b/search.xml
index a6aab5e2..2bca76b6 100644
--- a/search.xml
+++ b/search.xml
@@ -8,7 +8,7 @@
       <link href="/articles/b9f20a20.html"/>
       <url>/articles/b9f20a20.html</url>
       
-        <content type="html"><![CDATA[<h1 id="什么是Webpack"><a href="#什么是Webpack" class="headerlink" title="什么是Webpack"></a>什么是Webpack</h1><ol><li><p><a href="https://webpack.js.org/">官网</a></p></li><li><p>官方解释：<code>webpack is a static module bundler for modern JavaScript applications.</code></p></li><li><p>翻译一下：webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；</p></li><li><p>我们来对上面的解释进行拆解：</p><ul><li>打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具；</li><li>静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；</li><li>模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；</li><li>现代的modern：现代前端的开发越来越复杂，催生了webpack的出现和发展；</li></ul></li><li><p>即：无论开发使用什么语言，最终通过webpack将代码打包成普通的静态资源（详见下文：<a href="#webpackYLT">Webpack依赖图</a>）；</p></li></ol><h1 id="环境"><a href="#环境" class="headerlink" title="环境"></a>环境</h1><p>Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境；</p><h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><p>webpack的安装目前分为两个：webpack（代码使用）、webpack-cli（命令行使用）；</p><blockquote><p>这里推荐局部安装：假如电脑上有3个项目：vue2，vue3，react；三个项目都需要打包，可能依赖的webpack版本不一样；</p><p>所以：应该每个项目有着自己的webpack，需要用什么版本，在本地的局部环境安装对应的webpack版本即可；</p></blockquote><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack webpack-cli –g # 全局安装(不推荐)</span><br><span class="line">npm install webpack webpack-cli –D # 局部安装(-D开发环境安装,生产环境已经打包成静态资源了,不需要使用webpack)</span><br></pre></td></tr></table></figure><h1 id="基础打包"><a href="#基础打包" class="headerlink" title="基础打包"></a>基础打包</h1><h2 id="默认打包"><a href="#默认打包" class="headerlink" title="默认打包"></a>默认打包</h2><ol><li>创建个文件夹，使用<code>npm init -y</code>创建package.json；</li><li><code>npm i webpack webpack-cli -D</code>安装局部环境依赖；</li><li>在根目录下新建<code>src</code>文件夹，文件夹下新建入口文件<code>index.js</code>，写入任意js代码；</li><li>在根目录下<code>cmd</code>：通过<code>npx webpack</code>进行打包&#x3D;&#x3D;&gt;打包成功：根目录下生成<code>dist</code>文件夹，下面有<code>main.js</code>；(可以将此打包之后的js引入html中，可以正常运行)；</li><li>但是如果根目录下没有<code>src</code>文件夹(其他名字的文件夹也不行)，或者<code>src</code>文件夹下的js不叫<code>index.js</code>进行打包&#x3D;&#x3D;&gt;打包失败；（即：文件夹必须叫src，入口文件必须叫index.js）；</li><li>那如果就不想有src文件夹或index.js如何进行打包呢？这里用到了配置参数；</li></ol><h2 id="配置参数"><a href="#配置参数" class="headerlink" title="配置参数"></a>配置参数</h2><blockquote><p>修改文件夹名为location，下面js改为main.js；</p></blockquote><ul><li>指定入口；</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx webpack --entry ./location/main.js   #-entry为入口文件的意思, 后面跟 入口文件的路径;</span><br></pre></td></tr></table></figure><p>如何修改打包之后的文件夹名和下面的js名呢？</p><ul><li>指定输出文件夹名、输出文件名；</li></ul><figure class="highlight plaintext"><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">npx webpack --entry ./location/main.js --output-filename fsl.js --output-path fsllala</span><br><span class="line">#--output-filename fsl.js   指定输出文件名为 fsl.js</span><br><span class="line">#--output-path fsllala      指定输出文件夹名为 fsllala </span><br></pre></td></tr></table></figure><p>但是这样写配置参数，太长了，不方便，如何解决呢？&#x3D;&#x3D;&gt;单独创建配置文件；</p><h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><blockquote><p>在根目录下新建<code>webpack.config.js</code>(固定名字)，里面进行参数配置；</p></blockquote><p>此时目录结构如下：</p><figure class="highlight plaintext"><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></pre></td><td class="code"><pre><span class="line">|—— node_modules</span><br><span class="line">|—— package.json</span><br><span class="line">|—— package-lock.json</span><br><span class="line">|—— webpack.config.js #配置文件</span><br><span class="line">└── location          #源码目录  (一般叫src,这里是为了改配置,所以改为了location)</span><br><span class="line">        |── main.js   #入口文件  (一般叫index.js,这里是为了改配置,所以改为了main.js)</span><br><span class="line">        |── name.js   #依赖文件</span><br><span class="line">        └── age.js    #依赖文件</span><br></pre></td></tr></table></figure><ul><li><code>webpack.config.js</code>其实是个模块，webpack的运行环境为<code>nodejs</code>，<code>nodejs</code>会将该模块导出的内容进行读取；所以需要使用<a href="https://fsllala.top/articles/4dee6fea">node的CommonJs</a>；不能使用ES6模块，即：</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js文件</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;&#125;  <span class="comment">// commonJs</span></span><br></pre></td></tr></table></figure><ul><li>进行相关参数配置</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./location/main.js&quot;</span>, <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;fsl.js&quot;</span>, <span class="comment">// 输出文件名</span></span><br><span class="line">    <span class="attr">path</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;fsllala&quot;</span>), <span class="comment">// 输出文件路径 (这里必须是绝对路径)</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li>如果不想叫<code>webpack.config.js</code>，而是叫<code>vue.config.js</code>，运行<code>npx webpack</code>&#x3D;&#x3D;&gt;报错；</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx webpack --config vue.config.js # 通过指定配置文件名,可以解决</span><br></pre></td></tr></table></figure><ul><li><code>npm run build</code>是怎么做到打包的呢</li></ul><figure class="highlight js"><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"><span class="comment">// package.json</span></span><br><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;build&quot;</span>:<span class="string">&quot;webpack --config vue.config.js&quot;</span>  <span class="comment">// 这里不是cmd,所以去掉npx</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="进阶打包"><a href="#进阶打包" class="headerlink" title="进阶打包"></a>进阶打包</h1><h2 id="Webpack依赖图"><a href="#Webpack依赖图" class="headerlink" title="Webpack依赖图"></a><a id="webpackYLT">Webpack依赖图</a></h2><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/webpack.png" alt="webpack"></p><p>webpack到底是如何对我们的项目进行打包的呢？</p><ul><li>事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；</li><li>从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字 体等）；</li><li>然后遍历图结构，打包一个个模块 (webpack默认只给JS文件打包，别的文件需要根据文件的不同使用不同的loader来解析)；</li></ul><h2 id="loader"><a href="#loader" class="headerlink" title="loader"></a>loader</h2><p>新建目录结构如下：</p><figure class="highlight plaintext"><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></pre></td><td class="code"><pre><span class="line">|—— node_modules</span><br><span class="line">|—— package.json</span><br><span class="line">|—— package-lock.json</span><br><span class="line">|—— webpack.config.js #配置文件</span><br><span class="line">|—— index.html        </span><br><span class="line">└── src               #源码目录 </span><br><span class="line">     |── index.js     #入口文件</span><br><span class="line">     |── components   # 存放js的文件夹 </span><br><span class="line">     |── css          # 存放css的文件夹 </span><br></pre></td></tr></table></figure><h3 id="验证loader作用"><a href="#验证loader作用" class="headerlink" title="验证loader作用"></a>验证loader作用</h3><p>验证上问提及：webpack默认只给JS文件打包，别的文件需要根据文件的不同使用不同的loader来解析；</p><blockquote><p>期望效果：</p><ol><li>index.html 文件中仅引入打包之后的入口文件，别的不做任何操作；</li><li>页面展示有css样式的内容；</li></ol></blockquote><p>编写验证代码</p><ol><li>css文件夹下新建div_style.css</li></ol><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/* css/div_style.css */</span></span><br><span class="line"><span class="selector-class">.redColor</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>components文件夹下新建div_cpns.js</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// components/div_cpns.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;../css/div_style.css&quot;</span>;  <span class="comment">// 模块引入;添加到依赖图中 (css模块没有进行导出)</span></span><br><span class="line"><span class="keyword">const</span> div = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">div.<span class="property">innerHTML</span> = <span class="string">&quot;hello world&quot;</span>;</span><br><span class="line">div.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;redColor&quot;</span>);</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">append</span>(div);</span><br></pre></td></tr></table></figure><ol start="3"><li>入口文件引入div_cpns.js</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/index.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;./components/div_cpns.js&quot;</span>; <span class="comment">// 模块引入;添加到依赖图中 (div_cpns.js模块没有进行导出)</span></span><br></pre></td></tr></table></figure><ol start="4"><li>使用<code>npm run build</code>进行打包</li></ol><figure class="highlight plaintext"><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"># package.json </span><br><span class="line"> &quot;scripts&quot;: &#123;</span><br><span class="line">    &quot;build&quot;:&quot;webpack&quot;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure><p>打包出错，打包结果如下图所示：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/css-loader1.png" alt="css-loader1"></p><p>上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？</p><ul><li>loader 可以用于对模块的源代码进行转换；</li><li>我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；</li><li>在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；</li><li>webpack默认支持对js文件的处理；其他文件需要根据文件的不同使用不同的loader来解析；</li></ul><h3 id="css-loader与style-loader"><a href="#css-loader与style-loader" class="headerlink" title="css-loader与style-loader"></a>css-loader与style-loader</h3><ul><li>css-loader：可以解析css文件的loader。但该loader并不会将解析之后的css插入到页面中，即如果只使用该loader会产生css解析完了，但是页面没有效果的现象；</li><li>style-loader：会将解析之后的css插入到页面，即完成插入style的操作；</li></ul><p>loader下载：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install css-loader style-loader -D  #loader其实都是研发环境的,生产环境都是解析之后的静态文件;</span><br></pre></td></tr></table></figure><h3 id="loader配置"><a href="#loader配置" class="headerlink" title="loader配置"></a>loader配置</h3><ul><li>webpack.config.js文件中的module.rules中允许我们配置多个loader；</li><li>module.rules的配置如下：<ul><li>rules属性对应的值是一个数组，数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性：<ul><li>test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；</li><li>use属性：对应的值是一个数组，数组里为各种loader；注意：loader的执行顺序是从后往前的；</li><li>use属性数组内可以为对象，对象属性为：<ul><li>loader：必须有一个 loader属性，对应的值是一个字符串；</li><li>options：可选的属性，值是一个字符串或者对象，值会被传入到loader中</li><li>query：目前已经使用options来替代；</li></ul></li><li>use属性数组内可以为字符串，是 loader 属性的简写方式；</li></ul></li></ul></li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">module</span>:&#123;</span><br><span class="line">        <span class="attr">rules</span>:[</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="comment">// 告诉webpack匹配什么文件(.在正则中表示除换行符之外的任何字符,所以需要\进行转义)</span></span><br><span class="line">                <span class="attr">test</span>:<span class="regexp">/\.css$/</span>,  </span><br><span class="line">                <span class="comment">// 告诉webpack使用什么loader进行匹配之后的处理(loader的执行顺序是从后往前的)</span></span><br><span class="line">                <span class="attr">use</span>:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>] </span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>使用<code>npm run build</code>进行打包&#x3D;&#x3D;&gt;打包成功；</p><p>index.html引入打包之后的文件，查看效果：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./dist/main.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="less-loader"><a href="#less-loader" class="headerlink" title="less-loader"></a>less-loader</h3><blockquote><p>less同理，环境不支持该预处理器，需将现将less、sass等编写的css需要通过工具转换成普通的css；</p></blockquote><p>loader下载</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install less-loader -D</span><br></pre></td></tr></table></figure><p>配置webpack.config.js</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">module</span>:&#123;</span><br><span class="line">        <span class="attr">rules</span>:[</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">test</span>:<span class="regexp">/\.less$/</span>,</span><br><span class="line">                <span class="attr">use</span>:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>]  <span class="comment">// less会转化为css,所以还需要css-loader</span></span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="PostCSS"><a href="#PostCSS" class="headerlink" title="PostCSS"></a>PostCSS</h3><p>参考文献：<a href="https://blog.csdn.net/xun__xing/article/details/108290032">PostCss</a>，<a href="https://zhuanlan.zhihu.com/p/61344763">PostCSS真的太好用了！</a></p><p>loader下载</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install postcss-loader -D</span><br></pre></td></tr></table></figure><h4 id="autoprefixer"><a href="#autoprefixer" class="headerlink" title="autoprefixer"></a>autoprefixer</h4><ul><li>有一些css属性存在浏览器兼容问题，需要开发手动添加浏览器前缀；</li><li>而Autoprefixer将使用基于当前浏览器支持的特性和属性数据去为你自动添加前缀(-webkit-，-ms-，-moz-)。你可以尝试下Autoprefixer的demo：<a href="http://autoprefixer.github.io/">Autoprefixer CSS online</a></li></ul><p>使用postcss插件Autoprefixer：</p><ol><li>下载</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install autoprefixer -D</span><br></pre></td></tr></table></figure><ol start="2"><li>设置单独的postcss配置文件：根目录下，新建<code>postcss.config.js</code>( 注意：因为postcss需要有对应的插件才会起效果，所以我们需要配置它的plugin)；</li></ol><figure class="highlight js"><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"><span class="comment">// postcss.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">plugins</span>: [<span class="string">&quot;autoprefixer&quot;</span>],</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ol start="3"><li>设置loader</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">module</span>:&#123;</span><br><span class="line">        <span class="attr">rules</span>:[</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">test</span>:<span class="regexp">/\.css$/</span>,</span><br><span class="line">                <span class="comment">// postcss先对css进行处理,所以写在后面(从后往前解析)</span></span><br><span class="line">                <span class="attr">use</span>:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;postcss-loader&#x27;</span>] </span><br><span class="line">            &#125;,</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li>相关css代码</li></ol><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/* css/div_style.css */</span></span><br><span class="line"><span class="selector-class">.redColor</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">    user-select: none;  <span class="comment">/* 这个属性有兼容差异,这里我们没做处理, Autoprefixer自动做浏览器兼容处理*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li><code>npm run build</code>进行打包，index.html引入打包之后的文件，检查css</li><li>效果如下</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/Autoprefixer.png" alt="Autoprefixer"></p><h4 id="postcss-preset-env"><a href="#postcss-preset-env" class="headerlink" title="postcss-preset-env"></a>postcss-preset-env</h4><ul><li>集成了postcss常用的插件(Autoprefixer，polyfill……)；</li><li>所以用postcss-preset-env，就不需要安装使用Autoprefixer了，因为内部已经集成了Autoprefixer；</li></ul><p>使用postcss插件postcss-preset-env同Autoprefixer步骤；</p><h3 id="Webpack打包图片"><a href="#Webpack打包图片" class="headerlink" title="Webpack打包图片"></a>Webpack打包图片</h3><h4 id="asset-module-type"><a href="#asset-module-type" class="headerlink" title="asset module type"></a><a href="https://webpack.docschina.org/guides/asset-modules">asset module type</a></h4><ul><li><p><strong>我们当前使用的webpack版本是webpack5：</strong></p><ul><li>在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；(需要下载对应的loader，然后使用)</li><li>在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；(不需要下载loader)</li></ul></li><li><p>**资源模块类型(asset module type)**，通过添加 4 种新的模块类型，来替换所有这些 loader：</p><ul><li>asset&#x2F;resource 发送一个单独的文件并导出 URL；(之前通过使用 file-loader 实现)</li><li>asset&#x2F;inline 导出一个资源的 data URI；(之前通过使用 url-loader 实现)</li><li>asset&#x2F;source 导出资源的源代码（基本不用）；(之前通过使用 raw-loader 实现)</li><li>asset在导出一个 data URI 和发送一个单独的文件之间自动选择；(之前通过使用 url-loader，并且配置资源体积限制实现)</li></ul></li></ul><h4 id="asset-module-type的使用"><a href="#asset-module-type的使用" class="headerlink" title="asset module type的使用"></a>asset module type的使用</h4><ol><li>新建文件夹img，用于存放图片；</li><li>在components下，新建img_cpns.js；</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/components/img_cpns.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 在webpack中,任何文件都是一个模块,都可以引入其模块;</span></span><br><span class="line"><span class="comment">// 引入图片模块</span></span><br><span class="line"><span class="keyword">import</span> kunkun <span class="keyword">from</span> <span class="string">&quot;../img/ikun.jpg&quot;</span>;  <span class="comment">// 因为要对该图片使用,所以起了个别名,而不是直接引入</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> img = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;img&quot;</span>);</span><br><span class="line">img.<span class="property">src</span> = kunkun;</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">append</span>(img);</span><br></pre></td></tr></table></figure><ol start="3"><li>在入口文件里面引入img_cpns.js，构成webpack的依赖图结构；</li></ol><figure class="highlight js"><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"><span class="comment">// src/index.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;./components/div_cpns.js&quot;</span>; <span class="comment">// 模块引入;添加到依赖图中 (div_cpns.js模块没有进行导出)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;./components/img_cpns.js&quot;</span>; <span class="comment">// 模块引入;添加到依赖图中 (img_cpns.js模块没有进行导出)</span></span><br></pre></td></tr></table></figure><ol start="4"><li>webpack5版本开始，不需要下载资源loader，只需要配置asset module type即可；</li></ol><div class="tabs" id="assetmoduletype"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#assetmoduletype-1">asset/resource</button></li><li class="tab"><button type="button" data-href="#assetmoduletype-2">asset/inline</button></li><li class="tab"><button type="button" data-href="#assetmoduletype-3">asset</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="assetmoduletype-1"><blockquote><p>将图片全部转换为一个单独的文件</p></blockquote><ul><li>配置webpack</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">module</span>:&#123;</span><br><span class="line">        <span class="attr">rules</span>:[</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">test</span>:<span class="regexp">/\.(png|jpe?g|gif|svg|webp)$/</span>,  <span class="comment">// 图片资源 (jpe?g表示jpg和jpeg格式)</span></span><br><span class="line">                <span class="comment">// 打包图片,将图片打包成一个单独的文件,然后引入</span></span><br><span class="line">                <span class="attr">type</span>:<span class="string">&#x27;asset/resource&#x27;</span>,</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>通过<code>npm run build</code>进行打包；观察打包之后的dist文件夹；**(每次打包前需要删除之前的dist文件夹，防止之前的分包依旧保留，后续可以通过配置实现自动删除)**</li></ul><p>发现将原来的ikun.jpg，打包成了1d40d06e317136088c5a.jpg；然后main.js对打包之后的图片地址做了处理；</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/assetResource.png" alt="assetResource"></p><ul><li>浏览器运行，可看到图片正常显示，图片地址为在线地址：<a href="http://127.0.0.1:5500/dist/1d40d06e317136088c5a.jpg">http://127.0.0.1:5500/dist/1d40d06e317136088c5a.jpg</a></li></ul><blockquote><p>如何做到自定义输出文件名呢？</p></blockquote><p>自定义输出文件名：<a href="https://webpack.docschina.org/guides/asset-modules#custom-output-filename">官网</a></p><ul><li>配置webpack</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(png|jpe?g|gif|svg|webp)$/</span>, <span class="comment">// 图片资源 (jpe?g表示jpg和jpeg格式)</span></span><br><span class="line">        <span class="comment">// 打包图片,将图片打包成一个单独的文件,然后引入</span></span><br><span class="line">        <span class="attr">type</span>: <span class="string">&quot;asset/resource&quot;</span>,</span><br><span class="line">        <span class="comment">// 匹配符合test条件的文件(如果直接写到output,就不会匹配test条件)</span></span><br><span class="line">        <span class="attr">generator</span>: &#123;</span><br><span class="line">          <span class="attr">filename</span>: <span class="string">&quot;[name]_[hash][ext]&quot;</span>, </span><br><span class="line">            <span class="comment">// [name]代表原文件名;</span></span><br><span class="line">            <span class="comment">// [etx]代表原文件后缀;</span></span><br><span class="line">            <span class="comment">// [hash]唯一ID(防止打包前不同文件夹内有名字后缀都相同的文件,打包之后无法区分)</span></span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>通过<code>npm run build</code>进行打包；观察打包之后的dist文件夹；**(每次打包前需要删除之前的dist文件夹，防止之前的分包依旧保留，后续可以通过配置实现自动删除)**</p><p>发现将原来的ikun.jpg，打包成了：ikun_1d40d06e317136088c5a.jpg；</p><blockquote><p>如何将图片资源放到一个单独的文件夹内呢？</p></blockquote><ul><li>配置webpack</li></ul><figure class="highlight js"><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"><span class="attr">generator</span>: &#123;</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;images/[name]_[hash][ext]&quot;</span>, </span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="assetmoduletype-2"><blockquote><p>将图片全部转换为base64格式；</p></blockquote><ul><li><p>优点：相比较于 asset&#x2F;resource，少发送(图片加载)网络请求；</p></li><li><p>缺点：造成JS文件偏大，下载JS文件、解析本身消耗时间非常长&#x3D;&#x3D;&gt;造成代码阻塞；</p></li><li><p>配置webpack</p></li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">module</span>:&#123;</span><br><span class="line">        <span class="attr">rules</span>:[</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">test</span>:<span class="regexp">/\.(png|jpe?g|gif|svg|webp)$/</span>,  <span class="comment">// 图片资源 (jpe?g表示jpg和jpeg格式)</span></span><br><span class="line">                <span class="comment">// 打包图片,inline的寓意就是将图片转为base64,然后放到了打包之后的main.js里面(行内)</span></span><br><span class="line">                <span class="attr">type</span>:<span class="string">&#x27;asset/inline&#x27;</span>,</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>通过<code>npm run build</code>进行打包；观察打包之后的dist文件夹；**(每次打包前需要删除之前的dist文件夹，防止之前的分包依旧保留，后续可以通过配置实现自动删除)**</li></ul><p>发现dist文件夹里面只有一个main.js；</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/assetInline.png" alt="assetInline"></p><ul><li>浏览器运行，可看到图片正常显示，图片地址为base64：data:image&#x2F;jpeg;base64,&#x2F;9j&#x2F;4AAQSkZJRgABAQAAAQABAAD…P2atuIjKPvHtU5hxbHHVqzLS6xGJv4G6CtISEIPRulecZn&#x2F;&#x2F;Z</li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="assetmoduletype-3"><blockquote><p>可通过合理的配置，决定图片的转化；</p></blockquote><p>合理的配置：</p><ul><li><p>小一点的图片：进行base64编码；</p></li><li><p>大一点的图片：单独的图片打包，形成url地址，单独的请求这个url图片；</p></li><li><p>配置webpack：<a href="https://webpack.docschina.org/guides/asset-modules#general-asset-type">官网</a></p></li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(png|jpe?g|gif|svg|webp)$/</span>, <span class="comment">// 图片资源 (jpe?g表示jpg和jpeg格式)</span></span><br><span class="line">        <span class="comment">// 打包图片</span></span><br><span class="line">        <span class="attr">type</span>: <span class="string">&quot;asset&quot;</span>,</span><br><span class="line">        <span class="attr">parser</span>: &#123;</span><br><span class="line">          <span class="attr">dataUrlCondition</span>: &#123;</span><br><span class="line">            <span class="attr">maxSize</span>: <span class="number">18</span> * <span class="number">1024</span>, <span class="comment">// 18kb (小于18kb,转为base64;大于18kb,单独打包成文件)</span></span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h3 id="Babel"><a href="#Babel" class="headerlink" title="Babel"></a>Babel</h3><ul><li>webpack可以打包JS文件，但是ES6+的语法不会转化为ES5；</li><li>Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；</li><li>包括：ES6+，TypeScript、Vue、React等通过Babel转换为向后兼容版本的JavaScript；</li><li>在线Babel转换：<a href="https://babeljs.io/">官网</a></li></ul><h4 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h4><p>Babel的使用，需要安装相应的插件(这里不过多介绍，一般来说安装<strong>预设preset</strong>即可)；</p><figure class="highlight plaintext"><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"># 基本不安装此插件</span><br><span class="line">npm install @babel/plugin-transform-arrow-functions -D    #箭头函数 转成 普通函数 插件</span><br><span class="line">npm install @babel/plugin-transform-block-scoping -D      # const/let 转成 var 插件</span><br></pre></td></tr></table></figure><h4 id="Babel的预设preset"><a href="#Babel的预设preset" class="headerlink" title="Babel的预设preset"></a>Babel的预设preset</h4><blockquote><p>集成了Babel常用的插件；</p></blockquote><ul><li>安装</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install @babel/preset-env -D  #安装预设preset</span><br><span class="line">npm install babel-loader -D  #安装babel-loader</span><br></pre></td></tr></table></figure><ul><li>使用</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//webpack.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">          <span class="attr">test</span>:<span class="regexp">/\.js$/</span>,</span><br><span class="line">          <span class="attr">use</span>:[<span class="string">&quot;babel-loader&quot;</span>],</span><br><span class="line">      &#125;</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight js"><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"><span class="comment">// 新建babel.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">presets</span>:[<span class="string">&quot;@babel/preset-env&quot;</span>],</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>入口文件</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// // src/index.js</span></span><br><span class="line"><span class="comment">// import &quot;./components/div_cpns.js&quot;; // 模块引入;添加到依赖图中 (div_cpns.js模块没有进行导出)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// import &quot;./components/img_cpns.js&quot;; // 模块引入;添加到依赖图中 (img_cpns.js模块没有进行导出)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> message=<span class="string">&quot;hello babel&quot;</span>;</span><br><span class="line">message.<span class="title function_">split</span>(<span class="string">&quot; &quot;</span>).<span class="title function_">map</span>(<span class="function">(<span class="params">item</span>)=&gt;</span><span class="variable language_">console</span>.<span class="title function_">log</span>(item))</span><br></pre></td></tr></table></figure><ul><li>打包<code>npm run build</code>，查看打包之后的main.js；(箭头函数转化为了普通函数)</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;hello babel&quot;</span>.<span class="title function_">split</span>(<span class="string">&quot; &quot;</span>).<span class="title function_">map</span>((<span class="keyword">function</span>(<span class="params">l</span>)&#123;<span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(l)&#125;));</span><br></pre></td></tr></table></figure><h2 id="Plugin"><a href="#Plugin" class="headerlink" title="Plugin"></a>Plugin</h2><ul><li>Loader是用于特定的模块类型进行转换；(文件解析、转换)</li><li>Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；(文件解析、转换之外的所有事情);</li><li><a href="https://webpack.docschina.org/plugins/">官网</a></li></ul><h3 id="CleanWebpackPlugin"><a href="#CleanWebpackPlugin" class="headerlink" title="CleanWebpackPlugin"></a>CleanWebpackPlugin</h3><blockquote><p>每次修改了一些配置，重新打包时，都需要手动删除dist文件夹，CleanWebpackPlugin可以自动化删除(需要配置输出目录)。</p><p>Tip：5.20.0+的版本，可以直接配置output&#x3D;&#x3D;&gt;<a href="https://webpack.docschina.org/configuration/output/#outputclean">官网</a></p></blockquote><ul><li>安装</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install clean-webpack-plugin -D</span><br></pre></td></tr></table></figure><ul><li>配置</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; <span class="title class_">CleanWebpackPlugin</span> &#125; = <span class="built_in">require</span>(<span class="string">&quot;clean-webpack-plugin&quot;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 必须要指定输出目录位置,否则不会自动清除;</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;dist&quot;</span>),</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [<span class="string">&quot;style-loader&quot;</span>, <span class="string">&quot;css-loader&quot;</span>, <span class="string">&quot;postcss-loader&quot;</span>], <span class="comment">// postcss先对css进行处理,所以写在后面(从后往前解析)</span></span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 使用插件(必须要指定输出目录位置,否则不会自动清除)</span></span><br><span class="line">  <span class="attr">plugins</span>: [<span class="keyword">new</span> <span class="title class_">CleanWebpackPlugin</span>()],</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li>测试</li></ul><p>在之前打包的dist文件夹中，随便新建个文件，比如abc.js&#x3D;&#x3D;&gt;打包之后被清除；</p>]]></content>
+        <content type="html"><![CDATA[<h1 id="什么是Webpack"><a href="#什么是Webpack" class="headerlink" title="什么是Webpack"></a>什么是Webpack</h1><ol><li><p><a href="https://webpack.js.org/">官网</a></p></li><li><p>官方解释：<code>webpack is a static module bundler for modern JavaScript applications.</code></p></li><li><p>翻译一下：webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；</p></li><li><p>我们来对上面的解释进行拆解：</p><ul><li>打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具；</li><li>静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；</li><li>模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；</li><li>现代的modern：现代前端的开发越来越复杂，催生了webpack的出现和发展；</li></ul></li><li><p>即：无论开发使用什么语言，最终通过webpack将代码打包成普通的静态资源（详见下文：<a href="#webpackYLT">Webpack依赖图</a>）；</p></li></ol><h1 id="环境"><a href="#环境" class="headerlink" title="环境"></a>环境</h1><p>Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境；</p><h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><p>webpack的安装目前分为两个：webpack（代码使用）、webpack-cli（命令行使用）；</p><blockquote><p>这里推荐局部安装：假如电脑上有3个项目：vue2，vue3，react；三个项目都需要打包，可能依赖的webpack版本不一样；</p><p>所以：应该每个项目有着自己的webpack，需要用什么版本，在本地的局部环境安装对应的webpack版本即可；</p></blockquote><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack webpack-cli –g # 全局安装(不推荐)</span><br><span class="line">npm install webpack webpack-cli –D # 局部安装(-D开发环境安装,生产环境已经打包成静态资源了,不需要使用webpack)</span><br></pre></td></tr></table></figure><h1 id="基础打包"><a href="#基础打包" class="headerlink" title="基础打包"></a>基础打包</h1><h2 id="默认打包"><a href="#默认打包" class="headerlink" title="默认打包"></a>默认打包</h2><ol><li>创建个文件夹，使用<code>npm init -y</code>创建package.json；</li><li><code>npm i webpack webpack-cli -D</code>安装局部环境依赖；</li><li>在根目录下新建<code>src</code>文件夹，文件夹下新建入口文件<code>index.js</code>，写入任意js代码；</li><li>在根目录下<code>cmd</code>：通过<code>npx webpack</code>进行打包&#x3D;&#x3D;&gt;打包成功：根目录下生成<code>dist</code>文件夹，下面有<code>main.js</code>；(可以将此打包之后的js引入html中，可以正常运行)；</li><li>但是如果根目录下没有<code>src</code>文件夹(其他名字的文件夹也不行)，或者<code>src</code>文件夹下的js不叫<code>index.js</code>进行打包&#x3D;&#x3D;&gt;打包失败；（即：文件夹必须叫src，入口文件必须叫index.js）；</li><li>那如果就不想有src文件夹或index.js如何进行打包呢？这里用到了配置参数；</li></ol><h2 id="配置参数"><a href="#配置参数" class="headerlink" title="配置参数"></a>配置参数</h2><blockquote><p>修改文件夹名为location，下面js改为main.js；</p></blockquote><ul><li>指定入口；</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx webpack --entry ./location/main.js   #-entry为入口文件的意思, 后面跟 入口文件的路径;</span><br></pre></td></tr></table></figure><p>如何修改打包之后的文件夹名和下面的js名呢？</p><ul><li>指定输出文件夹名、输出文件名；</li></ul><figure class="highlight plaintext"><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">npx webpack --entry ./location/main.js --output-filename fsl.js --output-path fsllala</span><br><span class="line">#--output-filename fsl.js   指定输出文件名为 fsl.js</span><br><span class="line">#--output-path fsllala      指定输出文件夹名为 fsllala </span><br></pre></td></tr></table></figure><p>但是这样写配置参数，太长了，不方便，如何解决呢？&#x3D;&#x3D;&gt;单独创建配置文件；</p><h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><blockquote><p>在根目录下新建<code>webpack.config.js</code>(固定名字)，里面进行参数配置；</p></blockquote><p>此时目录结构如下：</p><figure class="highlight plaintext"><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></pre></td><td class="code"><pre><span class="line">|—— node_modules</span><br><span class="line">|—— package.json</span><br><span class="line">|—— package-lock.json</span><br><span class="line">|—— webpack.config.js #配置文件</span><br><span class="line">└── location          #源码目录  (一般叫src,这里是为了改配置,所以改为了location)</span><br><span class="line">        |── main.js   #入口文件  (一般叫index.js,这里是为了改配置,所以改为了main.js)</span><br><span class="line">        |── name.js   #依赖文件</span><br><span class="line">        └── age.js    #依赖文件</span><br></pre></td></tr></table></figure><ul><li><code>webpack.config.js</code>其实是个模块，webpack的运行环境为<code>nodejs</code>，<code>nodejs</code>会将该模块导出的内容进行读取；所以需要使用<a href="https://fsllala.top/articles/4dee6fea">node的CommonJs</a>；不能使用ES6模块，即：</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js文件</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;&#125;  <span class="comment">// commonJs</span></span><br></pre></td></tr></table></figure><ul><li>进行相关参数配置</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./location/main.js&quot;</span>, <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;fsl.js&quot;</span>, <span class="comment">// 输出文件名</span></span><br><span class="line">    <span class="attr">path</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;fsllala&quot;</span>), <span class="comment">// 输出文件路径 (这里必须是绝对路径)</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li>如果不想叫<code>webpack.config.js</code>，而是叫<code>vue.config.js</code>，运行<code>npx webpack</code>&#x3D;&#x3D;&gt;报错；</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx webpack --config vue.config.js # 通过指定配置文件名,可以解决</span><br></pre></td></tr></table></figure><ul><li><code>npm run build</code>是怎么做到打包的呢</li></ul><figure class="highlight js"><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"><span class="comment">// package.json</span></span><br><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;build&quot;</span>:<span class="string">&quot;webpack --config vue.config.js&quot;</span>  <span class="comment">// 这里不是cmd,所以去掉npx</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="进阶打包"><a href="#进阶打包" class="headerlink" title="进阶打包"></a>进阶打包</h1><h2 id="Webpack依赖图"><a href="#Webpack依赖图" class="headerlink" title="Webpack依赖图"></a><a id="webpackYLT">Webpack依赖图</a></h2><p><img src="https://img.fsllala.top/webpack.png" alt="webpack"></p><p>webpack到底是如何对我们的项目进行打包的呢？</p><ul><li>事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；</li><li>从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字 体等）；</li><li>然后遍历图结构，打包一个个模块 (webpack默认只给JS文件打包，别的文件需要根据文件的不同使用不同的loader来解析)；</li></ul><h2 id="loader"><a href="#loader" class="headerlink" title="loader"></a>loader</h2><p>新建目录结构如下：</p><figure class="highlight plaintext"><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></pre></td><td class="code"><pre><span class="line">|—— node_modules</span><br><span class="line">|—— package.json</span><br><span class="line">|—— package-lock.json</span><br><span class="line">|—— webpack.config.js #配置文件</span><br><span class="line">|—— index.html        </span><br><span class="line">└── src               #源码目录 </span><br><span class="line">     |── index.js     #入口文件</span><br><span class="line">     |── components   # 存放js的文件夹 </span><br><span class="line">     |── css          # 存放css的文件夹 </span><br></pre></td></tr></table></figure><h3 id="验证loader作用"><a href="#验证loader作用" class="headerlink" title="验证loader作用"></a>验证loader作用</h3><p>验证上问提及：webpack默认只给JS文件打包，别的文件需要根据文件的不同使用不同的loader来解析；</p><blockquote><p>期望效果：</p><ol><li>index.html 文件中仅引入打包之后的入口文件，别的不做任何操作；</li><li>页面展示有css样式的内容；</li></ol></blockquote><p>编写验证代码</p><ol><li>css文件夹下新建div_style.css</li></ol><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/* css/div_style.css */</span></span><br><span class="line"><span class="selector-class">.redColor</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>components文件夹下新建div_cpns.js</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// components/div_cpns.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;../css/div_style.css&quot;</span>;  <span class="comment">// 模块引入;添加到依赖图中 (css模块没有进行导出)</span></span><br><span class="line"><span class="keyword">const</span> div = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">div.<span class="property">innerHTML</span> = <span class="string">&quot;hello world&quot;</span>;</span><br><span class="line">div.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;redColor&quot;</span>);</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">append</span>(div);</span><br></pre></td></tr></table></figure><ol start="3"><li>入口文件引入div_cpns.js</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/index.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;./components/div_cpns.js&quot;</span>; <span class="comment">// 模块引入;添加到依赖图中 (div_cpns.js模块没有进行导出)</span></span><br></pre></td></tr></table></figure><ol start="4"><li>使用<code>npm run build</code>进行打包</li></ol><figure class="highlight plaintext"><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"># package.json </span><br><span class="line"> &quot;scripts&quot;: &#123;</span><br><span class="line">    &quot;build&quot;:&quot;webpack&quot;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure><p>打包出错，打包结果如下图所示：</p><p><img src="https://img.fsllala.top/css-loader1.png" alt="css-loader1"></p><p>上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？</p><ul><li>loader 可以用于对模块的源代码进行转换；</li><li>我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；</li><li>在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；</li><li>webpack默认支持对js文件的处理；其他文件需要根据文件的不同使用不同的loader来解析；</li></ul><h3 id="css-loader与style-loader"><a href="#css-loader与style-loader" class="headerlink" title="css-loader与style-loader"></a>css-loader与style-loader</h3><ul><li>css-loader：可以解析css文件的loader。但该loader并不会将解析之后的css插入到页面中，即如果只使用该loader会产生css解析完了，但是页面没有效果的现象；</li><li>style-loader：会将解析之后的css插入到页面，即完成插入style的操作；</li></ul><p>loader下载：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install css-loader style-loader -D  #loader其实都是研发环境的,生产环境都是解析之后的静态文件;</span><br></pre></td></tr></table></figure><h3 id="loader配置"><a href="#loader配置" class="headerlink" title="loader配置"></a>loader配置</h3><ul><li>webpack.config.js文件中的module.rules中允许我们配置多个loader；</li><li>module.rules的配置如下：<ul><li>rules属性对应的值是一个数组，数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性：<ul><li>test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；</li><li>use属性：对应的值是一个数组，数组里为各种loader；注意：loader的执行顺序是从后往前的；</li><li>use属性数组内可以为对象，对象属性为：<ul><li>loader：必须有一个 loader属性，对应的值是一个字符串；</li><li>options：可选的属性，值是一个字符串或者对象，值会被传入到loader中</li><li>query：目前已经使用options来替代；</li></ul></li><li>use属性数组内可以为字符串，是 loader 属性的简写方式；</li></ul></li></ul></li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">module</span>:&#123;</span><br><span class="line">        <span class="attr">rules</span>:[</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="comment">// 告诉webpack匹配什么文件(.在正则中表示除换行符之外的任何字符,所以需要\进行转义)</span></span><br><span class="line">                <span class="attr">test</span>:<span class="regexp">/\.css$/</span>,  </span><br><span class="line">                <span class="comment">// 告诉webpack使用什么loader进行匹配之后的处理(loader的执行顺序是从后往前的)</span></span><br><span class="line">                <span class="attr">use</span>:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>] </span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>使用<code>npm run build</code>进行打包&#x3D;&#x3D;&gt;打包成功；</p><p>index.html引入打包之后的文件，查看效果：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./dist/main.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="less-loader"><a href="#less-loader" class="headerlink" title="less-loader"></a>less-loader</h3><blockquote><p>less同理，环境不支持该预处理器，需将现将less、sass等编写的css需要通过工具转换成普通的css；</p></blockquote><p>loader下载</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install less-loader -D</span><br></pre></td></tr></table></figure><p>配置webpack.config.js</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">module</span>:&#123;</span><br><span class="line">        <span class="attr">rules</span>:[</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">test</span>:<span class="regexp">/\.less$/</span>,</span><br><span class="line">                <span class="attr">use</span>:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>]  <span class="comment">// less会转化为css,所以还需要css-loader</span></span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="PostCSS"><a href="#PostCSS" class="headerlink" title="PostCSS"></a>PostCSS</h3><p>参考文献：<a href="https://blog.csdn.net/xun__xing/article/details/108290032">PostCss</a>，<a href="https://zhuanlan.zhihu.com/p/61344763">PostCSS真的太好用了！</a></p><p>loader下载</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install postcss-loader -D</span><br></pre></td></tr></table></figure><h4 id="autoprefixer"><a href="#autoprefixer" class="headerlink" title="autoprefixer"></a>autoprefixer</h4><ul><li>有一些css属性存在浏览器兼容问题，需要开发手动添加浏览器前缀；</li><li>而Autoprefixer将使用基于当前浏览器支持的特性和属性数据去为你自动添加前缀(-webkit-，-ms-，-moz-)。你可以尝试下Autoprefixer的demo：<a href="http://autoprefixer.github.io/">Autoprefixer CSS online</a></li></ul><p>使用postcss插件Autoprefixer：</p><ol><li>下载</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install autoprefixer -D</span><br></pre></td></tr></table></figure><ol start="2"><li>设置单独的postcss配置文件：根目录下，新建<code>postcss.config.js</code>( 注意：因为postcss需要有对应的插件才会起效果，所以我们需要配置它的plugin)；</li></ol><figure class="highlight js"><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"><span class="comment">// postcss.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">plugins</span>: [<span class="string">&quot;autoprefixer&quot;</span>],</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ol start="3"><li>设置loader</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">module</span>:&#123;</span><br><span class="line">        <span class="attr">rules</span>:[</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">test</span>:<span class="regexp">/\.css$/</span>,</span><br><span class="line">                <span class="comment">// postcss先对css进行处理,所以写在后面(从后往前解析)</span></span><br><span class="line">                <span class="attr">use</span>:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;postcss-loader&#x27;</span>] </span><br><span class="line">            &#125;,</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li>相关css代码</li></ol><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/* css/div_style.css */</span></span><br><span class="line"><span class="selector-class">.redColor</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">    user-select: none;  <span class="comment">/* 这个属性有兼容差异,这里我们没做处理, Autoprefixer自动做浏览器兼容处理*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li><code>npm run build</code>进行打包，index.html引入打包之后的文件，检查css</li><li>效果如下</li></ol><p><img src="https://img.fsllala.top/Autoprefixer.png" alt="Autoprefixer"></p><h4 id="postcss-preset-env"><a href="#postcss-preset-env" class="headerlink" title="postcss-preset-env"></a>postcss-preset-env</h4><ul><li>集成了postcss常用的插件(Autoprefixer，polyfill……)；</li><li>所以用postcss-preset-env，就不需要安装使用Autoprefixer了，因为内部已经集成了Autoprefixer；</li></ul><p>使用postcss插件postcss-preset-env同Autoprefixer步骤；</p><h3 id="Webpack打包图片"><a href="#Webpack打包图片" class="headerlink" title="Webpack打包图片"></a>Webpack打包图片</h3><h4 id="asset-module-type"><a href="#asset-module-type" class="headerlink" title="asset module type"></a><a href="https://webpack.docschina.org/guides/asset-modules">asset module type</a></h4><ul><li><p><strong>我们当前使用的webpack版本是webpack5：</strong></p><ul><li>在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；(需要下载对应的loader，然后使用)</li><li>在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；(不需要下载loader)</li></ul></li><li><p>**资源模块类型(asset module type)**，通过添加 4 种新的模块类型，来替换所有这些 loader：</p><ul><li>asset&#x2F;resource 发送一个单独的文件并导出 URL；(之前通过使用 file-loader 实现)</li><li>asset&#x2F;inline 导出一个资源的 data URI；(之前通过使用 url-loader 实现)</li><li>asset&#x2F;source 导出资源的源代码（基本不用）；(之前通过使用 raw-loader 实现)</li><li>asset在导出一个 data URI 和发送一个单独的文件之间自动选择；(之前通过使用 url-loader，并且配置资源体积限制实现)</li></ul></li></ul><h4 id="asset-module-type的使用"><a href="#asset-module-type的使用" class="headerlink" title="asset module type的使用"></a>asset module type的使用</h4><ol><li>新建文件夹img，用于存放图片；</li><li>在components下，新建img_cpns.js；</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/components/img_cpns.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 在webpack中,任何文件都是一个模块,都可以引入其模块;</span></span><br><span class="line"><span class="comment">// 引入图片模块</span></span><br><span class="line"><span class="keyword">import</span> kunkun <span class="keyword">from</span> <span class="string">&quot;../img/ikun.jpg&quot;</span>;  <span class="comment">// 因为要对该图片使用,所以起了个别名,而不是直接引入</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> img = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;img&quot;</span>);</span><br><span class="line">img.<span class="property">src</span> = kunkun;</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">append</span>(img);</span><br></pre></td></tr></table></figure><ol start="3"><li>在入口文件里面引入img_cpns.js，构成webpack的依赖图结构；</li></ol><figure class="highlight js"><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"><span class="comment">// src/index.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;./components/div_cpns.js&quot;</span>; <span class="comment">// 模块引入;添加到依赖图中 (div_cpns.js模块没有进行导出)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;./components/img_cpns.js&quot;</span>; <span class="comment">// 模块引入;添加到依赖图中 (img_cpns.js模块没有进行导出)</span></span><br></pre></td></tr></table></figure><ol start="4"><li>webpack5版本开始，不需要下载资源loader，只需要配置asset module type即可；</li></ol><div class="tabs" id="assetmoduletype"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#assetmoduletype-1">asset/resource</button></li><li class="tab"><button type="button" data-href="#assetmoduletype-2">asset/inline</button></li><li class="tab"><button type="button" data-href="#assetmoduletype-3">asset</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="assetmoduletype-1"><blockquote><p>将图片全部转换为一个单独的文件</p></blockquote><ul><li>配置webpack</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">module</span>:&#123;</span><br><span class="line">        <span class="attr">rules</span>:[</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">test</span>:<span class="regexp">/\.(png|jpe?g|gif|svg|webp)$/</span>,  <span class="comment">// 图片资源 (jpe?g表示jpg和jpeg格式)</span></span><br><span class="line">                <span class="comment">// 打包图片,将图片打包成一个单独的文件,然后引入</span></span><br><span class="line">                <span class="attr">type</span>:<span class="string">&#x27;asset/resource&#x27;</span>,</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>通过<code>npm run build</code>进行打包；观察打包之后的dist文件夹；**(每次打包前需要删除之前的dist文件夹，防止之前的分包依旧保留，后续可以通过配置实现自动删除)**</li></ul><p>发现将原来的ikun.jpg，打包成了1d40d06e317136088c5a.jpg；然后main.js对打包之后的图片地址做了处理；</p><p><img src="https://img.fsllala.top/assetResource.png" alt="assetResource"></p><ul><li>浏览器运行，可看到图片正常显示，图片地址为在线地址：<a href="http://127.0.0.1:5500/dist/1d40d06e317136088c5a.jpg">http://127.0.0.1:5500/dist/1d40d06e317136088c5a.jpg</a></li></ul><blockquote><p>如何做到自定义输出文件名呢？</p></blockquote><p>自定义输出文件名：<a href="https://webpack.docschina.org/guides/asset-modules#custom-output-filename">官网</a></p><ul><li>配置webpack</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(png|jpe?g|gif|svg|webp)$/</span>, <span class="comment">// 图片资源 (jpe?g表示jpg和jpeg格式)</span></span><br><span class="line">        <span class="comment">// 打包图片,将图片打包成一个单独的文件,然后引入</span></span><br><span class="line">        <span class="attr">type</span>: <span class="string">&quot;asset/resource&quot;</span>,</span><br><span class="line">        <span class="comment">// 匹配符合test条件的文件(如果直接写到output,就不会匹配test条件)</span></span><br><span class="line">        <span class="attr">generator</span>: &#123;</span><br><span class="line">          <span class="attr">filename</span>: <span class="string">&quot;[name]_[hash][ext]&quot;</span>, </span><br><span class="line">            <span class="comment">// [name]代表原文件名;</span></span><br><span class="line">            <span class="comment">// [etx]代表原文件后缀;</span></span><br><span class="line">            <span class="comment">// [hash]唯一ID(防止打包前不同文件夹内有名字后缀都相同的文件,打包之后无法区分)</span></span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>通过<code>npm run build</code>进行打包；观察打包之后的dist文件夹；**(每次打包前需要删除之前的dist文件夹，防止之前的分包依旧保留，后续可以通过配置实现自动删除)**</p><p>发现将原来的ikun.jpg，打包成了：ikun_1d40d06e317136088c5a.jpg；</p><blockquote><p>如何将图片资源放到一个单独的文件夹内呢？</p></blockquote><ul><li>配置webpack</li></ul><figure class="highlight js"><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"><span class="attr">generator</span>: &#123;</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;images/[name]_[hash][ext]&quot;</span>, </span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="assetmoduletype-2"><blockquote><p>将图片全部转换为base64格式；</p></blockquote><ul><li><p>优点：相比较于 asset&#x2F;resource，少发送(图片加载)网络请求；</p></li><li><p>缺点：造成JS文件偏大，下载JS文件、解析本身消耗时间非常长&#x3D;&#x3D;&gt;造成代码阻塞；</p></li><li><p>配置webpack</p></li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">module</span>:&#123;</span><br><span class="line">        <span class="attr">rules</span>:[</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">test</span>:<span class="regexp">/\.(png|jpe?g|gif|svg|webp)$/</span>,  <span class="comment">// 图片资源 (jpe?g表示jpg和jpeg格式)</span></span><br><span class="line">                <span class="comment">// 打包图片,inline的寓意就是将图片转为base64,然后放到了打包之后的main.js里面(行内)</span></span><br><span class="line">                <span class="attr">type</span>:<span class="string">&#x27;asset/inline&#x27;</span>,</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>通过<code>npm run build</code>进行打包；观察打包之后的dist文件夹；**(每次打包前需要删除之前的dist文件夹，防止之前的分包依旧保留，后续可以通过配置实现自动删除)**</li></ul><p>发现dist文件夹里面只有一个main.js；</p><p><img src="https://img.fsllala.top/assetInline.png" alt="assetInline"></p><ul><li>浏览器运行，可看到图片正常显示，图片地址为base64：data:image&#x2F;jpeg;base64,&#x2F;9j&#x2F;4AAQSkZJRgABAQAAAQABAAD…P2atuIjKPvHtU5hxbHHVqzLS6xGJv4G6CtISEIPRulecZn&#x2F;&#x2F;Z</li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="assetmoduletype-3"><blockquote><p>可通过合理的配置，决定图片的转化；</p></blockquote><p>合理的配置：</p><ul><li><p>小一点的图片：进行base64编码；</p></li><li><p>大一点的图片：单独的图片打包，形成url地址，单独的请求这个url图片；</p></li><li><p>配置webpack：<a href="https://webpack.docschina.org/guides/asset-modules#general-asset-type">官网</a></p></li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(png|jpe?g|gif|svg|webp)$/</span>, <span class="comment">// 图片资源 (jpe?g表示jpg和jpeg格式)</span></span><br><span class="line">        <span class="comment">// 打包图片</span></span><br><span class="line">        <span class="attr">type</span>: <span class="string">&quot;asset&quot;</span>,</span><br><span class="line">        <span class="attr">parser</span>: &#123;</span><br><span class="line">          <span class="attr">dataUrlCondition</span>: &#123;</span><br><span class="line">            <span class="attr">maxSize</span>: <span class="number">18</span> * <span class="number">1024</span>, <span class="comment">// 18kb (小于18kb,转为base64;大于18kb,单独打包成文件)</span></span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h3 id="Babel"><a href="#Babel" class="headerlink" title="Babel"></a>Babel</h3><ul><li>webpack可以打包JS文件，但是ES6+的语法不会转化为ES5；</li><li>Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；</li><li>包括：ES6+，TypeScript、Vue、React等通过Babel转换为向后兼容版本的JavaScript；</li><li>在线Babel转换：<a href="https://babeljs.io/">官网</a></li></ul><h4 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h4><p>Babel的使用，需要安装相应的插件(这里不过多介绍，一般来说安装<strong>预设preset</strong>即可)；</p><figure class="highlight plaintext"><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"># 基本不安装此插件</span><br><span class="line">npm install @babel/plugin-transform-arrow-functions -D    #箭头函数 转成 普通函数 插件</span><br><span class="line">npm install @babel/plugin-transform-block-scoping -D      # const/let 转成 var 插件</span><br></pre></td></tr></table></figure><h4 id="Babel的预设preset"><a href="#Babel的预设preset" class="headerlink" title="Babel的预设preset"></a>Babel的预设preset</h4><blockquote><p>集成了Babel常用的插件；</p></blockquote><ul><li>安装</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install @babel/preset-env -D  #安装预设preset</span><br><span class="line">npm install babel-loader -D  #安装babel-loader</span><br></pre></td></tr></table></figure><ul><li>使用</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//webpack.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">          <span class="attr">test</span>:<span class="regexp">/\.js$/</span>,</span><br><span class="line">          <span class="attr">use</span>:[<span class="string">&quot;babel-loader&quot;</span>],</span><br><span class="line">      &#125;</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight js"><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"><span class="comment">// 新建babel.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">presets</span>:[<span class="string">&quot;@babel/preset-env&quot;</span>],</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>入口文件</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// // src/index.js</span></span><br><span class="line"><span class="comment">// import &quot;./components/div_cpns.js&quot;; // 模块引入;添加到依赖图中 (div_cpns.js模块没有进行导出)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// import &quot;./components/img_cpns.js&quot;; // 模块引入;添加到依赖图中 (img_cpns.js模块没有进行导出)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> message=<span class="string">&quot;hello babel&quot;</span>;</span><br><span class="line">message.<span class="title function_">split</span>(<span class="string">&quot; &quot;</span>).<span class="title function_">map</span>(<span class="function">(<span class="params">item</span>)=&gt;</span><span class="variable language_">console</span>.<span class="title function_">log</span>(item))</span><br></pre></td></tr></table></figure><ul><li>打包<code>npm run build</code>，查看打包之后的main.js；(箭头函数转化为了普通函数)</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;hello babel&quot;</span>.<span class="title function_">split</span>(<span class="string">&quot; &quot;</span>).<span class="title function_">map</span>((<span class="keyword">function</span>(<span class="params">l</span>)&#123;<span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(l)&#125;));</span><br></pre></td></tr></table></figure><h2 id="Plugin"><a href="#Plugin" class="headerlink" title="Plugin"></a>Plugin</h2><ul><li>Loader是用于特定的模块类型进行转换；(文件解析、转换)</li><li>Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；(文件解析、转换之外的所有事情);</li><li><a href="https://webpack.docschina.org/plugins/">官网</a></li></ul><h3 id="CleanWebpackPlugin"><a href="#CleanWebpackPlugin" class="headerlink" title="CleanWebpackPlugin"></a>CleanWebpackPlugin</h3><blockquote><p>每次修改了一些配置，重新打包时，都需要手动删除dist文件夹，CleanWebpackPlugin可以自动化删除(需要配置输出目录)。</p><p>Tip：5.20.0+的版本，可以直接配置output&#x3D;&#x3D;&gt;<a href="https://webpack.docschina.org/configuration/output/#outputclean">官网</a></p></blockquote><ul><li>安装</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install clean-webpack-plugin -D</span><br></pre></td></tr></table></figure><ul><li>配置</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; <span class="title class_">CleanWebpackPlugin</span> &#125; = <span class="built_in">require</span>(<span class="string">&quot;clean-webpack-plugin&quot;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 必须要指定输出目录位置,否则不会自动清除;</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;dist&quot;</span>),</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [<span class="string">&quot;style-loader&quot;</span>, <span class="string">&quot;css-loader&quot;</span>, <span class="string">&quot;postcss-loader&quot;</span>], <span class="comment">// postcss先对css进行处理,所以写在后面(从后往前解析)</span></span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 使用插件(必须要指定输出目录位置,否则不会自动清除)</span></span><br><span class="line">  <span class="attr">plugins</span>: [<span class="keyword">new</span> <span class="title class_">CleanWebpackPlugin</span>()],</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li>测试</li></ul><p>在之前打包的dist文件夹中，随便新建个文件，比如abc.js&#x3D;&#x3D;&gt;打包之后被清除；</p>]]></content>
       
       
       <categories>
@@ -33,7 +33,7 @@
       <link href="/articles/fa0f2f9c.html"/>
       <url>/articles/fa0f2f9c.html</url>
       
-        <content type="html"><![CDATA[<h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2><p>网站做完之后，移交给第三方机构进行安全检测，对”安全功能验证观察报告”指出的问题进行了如下修改；</p><h2 id="接口重放"><a href="#接口重放" class="headerlink" title="接口重放"></a>接口重放</h2><h3 id="什么是重放"><a href="#什么是重放" class="headerlink" title="什么是重放"></a>什么是重放</h3><p>参考文献：<a href="https://blog.csdn.net/koastal/article/details/53456696?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-53456696-blog-114984526.235%5Ev38%5Epc_relevant_anti_t3_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-53456696-blog-114984526.235%5Ev38%5Epc_relevant_anti_t3_base&utm_relevant_index=4">基于timestamp和nonce的防止重放攻击方案</a></p><blockquote><p>重放攻击指的是攻击者通过发送一个目的主机已接受到的包，来达到欺骗系统的目的。其基本原理就是把窃听到的数据原封不动的重新发送给接收方(好像修改了数据在发送就不叫重放了)，即使传输的数据是加密的，窃听方不知道具体的数据内容，但是容易知道数据的作用（即使不知道作用也能对系统造成一定破坏），这时就能通过原封不动的重新发送达到一定的目的，比如：</p></blockquote><ul><li>影响数据： 重放添加接口可能会无限添加数据；</li><li>数据泄漏： 攻击者可以重复访问敏感数据，导致数据泄漏；</li><li>资源耗尽： 重复请求可能导致服务器资源的枯竭，影响正常用户的服务；</li><li>身份伪装： 通过重复使用合法用户的身份验证凭据，攻击者可以伪装成合法用户执行操作；</li></ul><h3 id="如何防止重放"><a href="#如何防止重放" class="headerlink" title="如何防止重放"></a>如何防止重放</h3><p>给每个请求加上不可复制、不可模仿的唯一标识：时间戳+随机数并加密；</p><ul><li>时间戳<ul><li>优点：服务端对请求时间戳进行判断，如超过半分钟，认定为重放攻击，请求无效；</li><li>缺点：时间戳无法完全防止重放攻击。未认证系统还是可以在这半分钟的内，通过截获请求、重放请求来调用接口。并且认证双方需要准确的时间同步，同步越好，受攻击的可能性就越小。但当系统很庞大，跨越的区域较广时，要做到精确的时间同步并不是很容易。</li></ul></li><li>随机数<ul><li>优点：认证双方不需要时间同步，Redis缓存中如果有使用过的随机数，就认为是重放攻击；</li><li>缺点：需要保存所有使用过的随机数，若记录的时间段较长，则保存和查询的开销较大；</li></ul></li><li>时间戳+随机数并加密<ul><li>优点：超过半分钟，通过时间戳认定为重放攻击，请求无效；半分钟内，通过Redis存储的随机数认定为重放攻击，请求无效，超过半分钟，释放Redis随机数，避免存储大量数据；</li></ul></li></ul><h3 id="具体方案"><a href="#具体方案" class="headerlink" title="具体方案"></a>具体方案</h3><p>大致流程：</p><ol><li>前端：登录前先请求接口获取服务器时间，与本地时间比对，保存时间差；(这里不直接用前端的本地时间，是因为担心服务器时间与客户端时间存在偏差，前端通过此接口获取时间差并保存；之后所有接口防重放的时间戳都直接通过前端本地时间+校验时间差获取，即：获取服务器时间的接口只需要请求一次)；</li><li>前端：根据时间差校正本地时间，用校正后的本地时间拼接上随机数加密(生成的随机数需保证30s内不重复(可为唯一值)，加密使用RSA的公钥)，得到nonce（唯一标识）；</li><li>前端：将nonce放入API请求的请求头进行请求；</li><li>后端：在GateWay获取到请求头的nonce并解密；</li><li>后端：将解密后的时间戳与本地(服务端)时间做对比，若相差不超过30s则认为请求有效，否则认为请求超时（不返回结果）；</li><li>后端：若时间戳校验通过，则通过redis判断随机数是否在redis中，若不存在则认为请求有效并把随机数保存到redis中，过期时间设置为30s, 若存在则认为请求无效（不返回结果）；</li></ol><h3 id="时序图"><a href="#时序图" class="headerlink" title="时序图"></a>时序图</h3><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/deReplay.png" alt="nonce"></p><h3 id="前端代码"><a href="#前端代码" class="headerlink" title="前端代码"></a>前端代码</h3><p>参考文献：<a href="https://www.jb51.net/javascript/295944dtv.htm">前端利用jsencrypt.js进行RSA加密示例详解</a></p><ol><li><p>这里使用到了RSA加密，需要后端传给前端公钥(我们公司直接后端给的，没有用接口传递)，前端通过jsencrypt加密；</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install jsencrypt </span><br></pre></td></tr></table></figure></li><li><p>新建utils，例如JSEncrypt.js，封装对数据加密的方法；</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">JSEncrypt</span> &#125; <span class="keyword">from</span> <span class="string">&quot;jsencrypt&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">passwordEncryption</span>(<span class="params">passwordUser</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> publicKey =<span class="string">&quot;公钥&quot;</span>; <span class="comment">// 从后台获取公钥，这个保存一下，在这里用。</span></span><br><span class="line">    <span class="keyword">let</span> encryptor = <span class="keyword">new</span> <span class="title class_">JSEncrypt</span>(); <span class="comment">// 新建JSEncrypt对象</span></span><br><span class="line">    encryptor.<span class="title function_">setPublicKey</span>(publicKey); <span class="comment">// 设置公钥</span></span><br><span class="line">    <span class="keyword">let</span> passwordEncryp = encryptor.<span class="title function_">encrypt</span>(passwordUser); <span class="comment">// 对数据进行加密</span></span><br><span class="line">    <span class="keyword">return</span> passwordEncryp;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure></li><li><p>登录的时候，请求接口获取服务器时间，与本地时间比对，保存时间差到缓存；</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">formData</span>.<span class="title function_">validate</span>(<span class="keyword">async</span> (valid) =&gt; &#123;</span><br><span class="line">  <span class="keyword">if</span> (valid) &#123;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> res = <span class="keyword">await</span> <span class="title function_">identityReplayPrevention</span>(); <span class="comment">// 请求接口,获取服务端的时间;</span></span><br><span class="line">      <span class="keyword">if</span> (res.<span class="property">code</span> == <span class="number">0</span>) &#123;</span><br><span class="line">          <span class="comment">/**</span></span><br><span class="line"><span class="comment">           时间差</span></span><br><span class="line"><span class="comment">           这里需要注意:如果时间差=服务器时间戳-本地时间戳,则校正后的时间戳为本地时间戳+时间差;</span></span><br><span class="line"><span class="comment">                       如果时间差=本地时间戳-服务器时间戳,则校正后的时间戳为本地时间戳-时间差;</span></span><br><span class="line"><span class="comment">                       (可以举个例子:本地时间200,服务器时间400...)</span></span><br><span class="line"><span class="comment">          */</span> </span><br><span class="line">        <span class="keyword">const</span> verificationTimeDifference = res.<span class="property">data</span> - <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>();</span><br><span class="line">        sessionStorage.<span class="title function_">setItem</span>(<span class="string">&quot;verificationTimeDifference&quot;</span>,verificationTimeDifference);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">$message</span>.<span class="title function_">warning</span>(res.<span class="property">message</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">error</span>(error);</span><br><span class="line">    &#125;</span><br><span class="line">      <span class="comment">// 登录逻辑</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li><li><p>新建utils，例如getNonce.js，封装校正后的时间戳+随机数加密方法；</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; passwordEncryption &#125; <span class="keyword">from</span> <span class="string">&quot;@/utils/JSEncrypt.js&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">getNonceVal</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> verificationTimeDifference = <span class="title class_">Number</span>(sessionStorage.<span class="title function_">getItem</span>(<span class="string">&quot;verificationTimeDifference&quot;</span>)); <span class="comment">//获取时间差</span></span><br><span class="line">  <span class="comment">// 由于防重放改为了整个系统,这里随机数为唯一值;</span></span><br><span class="line">  <span class="keyword">const</span> randomNum = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>() + <span class="string">&quot;&quot;</span> + <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">30000</span>);<span class="comment">//唯一值</span></span><br><span class="line">  <span class="keyword">const</span> timeNow = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>() + verificationTimeDifference;<span class="comment">// 校正后的时间戳</span></span><br><span class="line">  <span class="keyword">const</span> fakeResult = <span class="string">`<span class="subst">$&#123;timeNow&#125;</span>_<span class="subst">$&#123;randomNum&#125;</span>`</span>; <span class="comment">// 校正后的时间戳_随机数</span></span><br><span class="line">  <span class="keyword">const</span> result = <span class="title function_">passwordEncryption</span>(fakeResult); <span class="comment">// 加密</span></span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li><li><p>在封装的请求拦截中，给每个请求的请求头加上nonce字段，值为：加密(校正后的时间戳_随机数)；</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; getNonceVal &#125; <span class="keyword">from</span> <span class="string">&quot;@/utils/getNonce.js&quot;</span>;</span><br><span class="line"><span class="comment">// 请求拦截器</span></span><br><span class="line">service.<span class="property">interceptors</span>.<span class="property">request</span>.<span class="title function_">use</span>(</span><br><span class="line">  <span class="function">(<span class="params">config</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加</span></span><br><span class="line">    <span class="comment">// config.data = JSON.stringify(config.data) //数据转化,也可以使用qs转换</span></span><br><span class="line">      </span><br><span class="line">     <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 防重放处理</span></span><br><span class="line"><span class="comment">     * 为了防止防重放的接口噶了,导致防重放功能失效;处理如下:</span></span><br><span class="line"><span class="comment">     * 前端:如果缓存里面没有时间差,就不在请求头上带nonce;</span></span><br><span class="line"><span class="comment">     * 后端:除了获取时间差的接口请求头可以没有nonce,别的接口如果请求头没有nonce字段,就是非法请求;</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">const</span> verificationTimeDifference = sessionStorage.<span class="title function_">getItem</span>(<span class="string">&quot;verificationTimeDifference&quot;</span>);</span><br><span class="line">    <span class="keyword">if</span>(verificationTimeDifference)&#123;</span><br><span class="line">      config.<span class="property">headers</span>.<span class="property">nonce</span> = <span class="title function_">getNonceVal</span>();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//...其他处理</span></span><br><span class="line">    <span class="comment">//如有需要：注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie</span></span><br><span class="line">    <span class="keyword">const</span> token = sessionStorage.<span class="title function_">getItem</span>(<span class="string">&quot;token&quot;</span>); <span class="comment">//这里取token之前，你肯定需要先拿到token,存一下</span></span><br><span class="line">    <span class="keyword">if</span> (token) &#123;</span><br><span class="line">      config.<span class="property">headers</span>.<span class="property">Authorization</span> = <span class="string">&quot;bearer &quot;</span> + token; <span class="comment">//如果要求携带在请求头中</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="title class_">Promise</span>.<span class="title function_">reject</span>(error);</span><br><span class="line">  &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure></li><li><p>查看每个接口的请求头，是否包含了nonce字段，因为每个接口请求的时间肯定不一样(毫秒级时间戳)，所以每个接口的nonce值都不一样；(即使相同的数据，每次加密结果也不一样)；</p></li><li><p>通过postman工具，进行抓包重放；(如果还能正常返回数据，后端的锅，去跟后端battle)；</p></li></ol><h2 id="数据完整性校验"><a href="#数据完整性校验" class="headerlink" title="数据完整性校验"></a>数据完整性校验</h2><blockquote><p>接口加了防重放就安全了吗？答案是否定的。防重放仅能阻止重放请求，不能保证请求数据不被篡改。比如：我在浏览器请求接口前设置为断网，然后请求该接口，此时我能拿到该请求所需的所有参数，并且这个请求是到达不了服务端的，也就是Redis没有此次请求的随机数，那么我只要在规定的时间间隔内，修改请求数据，发送请求是可以正常返回数据的。</p></blockquote><h3 id="消息摘要"><a href="#消息摘要" class="headerlink" title="消息摘要"></a>消息摘要</h3><blockquote><p>对数据完整性作叫校验，保证请求的数据在传输过程中未被修改；</p></blockquote><p>参考文献：<a href="https://www.cnblogs.com/gavincoder/p/13622224.html">深入理解-信息加密&#x2F;信息摘要&#x2F;数字签名</a>，<a href="https://blog.csdn.net/w1673492580/article/details/113524908">消息摘要、各种加密方式的简要说明</a></p><ul><li>消息摘要通常采用哈希&#x2F;散列算法生成，比如MD5、SHA、MAC系列，是一种不可逆的单向算法，它可以把任意长度的信息，生成固定长度的摘要，这个摘要是唯一的，任何对输入数据稍作更改都会导致不同的摘要；并且无法通过摘要信息反向解析出原始数据。所以消息摘要一般用来确保数据传输过程中的完整性、不可还原的密码存储；</li><li>消息摘要用于生成数据的”指纹”，其算法的主要特征是加密过程不需要密钥，并且经过加密的数据无法被解密；</li><li>发送方在传输时，需要将原始数据与摘要信息同时传递给接收方，接收方再对原始数据进行同样的处理得到新的摘要信息，通过对比两个摘要信息是否一样，即可判断数据在传输过程中是否有被修改。 当然，双方需要提前约定好摘要信息的生成规则；</li></ul><h4 id="具体方案-1"><a href="#具体方案-1" class="headerlink" title="具体方案"></a>具体方案</h4><blockquote><p>如果你希望验证整个请求体的完整性，包括请求中的文件数据，通常是通过将整个请求体进行哈希处理（包括文件数据和其他元数据）来生成一个摘要值，然后将该摘要值放在请求头或请求体中一同发送给后端。这样可以确保请求体在传输过程中未被篡改。</p></blockquote><p>大致流程：</p><ol><li>前端将请求体的所有内容（包括文件数据和其他元数据）进行哈希处理，生成一个摘要值；</li><li>将该摘要值放在请求头中，例如，可以使用自定义请求头；</li><li>发送请求至后端，包括请求头和请求体；</li><li>后端接收请求后，提取请求头中的摘要值；</li><li>后端再次对整个请求体进行哈希处理，生成一个新的摘要值；</li><li>后端将前端提供的摘要值与自己生成的摘要值进行比较，以验证请求体的完整性；</li></ol><ul><li>这种方法确保了请求体中的所有内容都被包括在摘要计算中，因此即使请求体中的任何部分被篡改，摘要值也会不同，从而使后端能够检测到篡改；</li><li>需要注意的是，这需要前端和后端都遵守相同的摘要算法和相同的计算方法，以便正确验证请求体的完整性。另外，这种方式会增加请求的计算和处理负担，特别是对于大文件的情况；</li></ul><h4 id="时序图-1"><a href="#时序图-1" class="headerlink" title="时序图"></a>时序图</h4><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/messageZhaiYao.png" alt="zhaiyao"></p><h4 id="基本代码"><a href="#基本代码" class="headerlink" title="基本代码"></a>基本代码</h4><ul><li>安装 crypto-js</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install crypto-js</span><br></pre></td></tr></table></figure><ul><li><p>使用：<code>const crytoResult = CryptoJS.SHA256(params).toString(CryptoJS.enc.Hex).toUpperCase();</code></p></li><li><p>解释：</p><ul><li><p><code>CryptoJS.SHA256(params)</code>: 这部分使用 CryptoJS 库中的 <code>SHA256</code> 函数来计算输入 <code>params</code> 的 SHA-256 摘要。SHA-256 是一种散列函数，它将输入数据转换为固定长度的散列值，通常为 64 个字符的十六进制字符串。</p></li><li><p><code>.toString(CryptoJS.enc.Hex)</code>: 这部分将计算得到的 SHA-256 摘要转换为一个十六进制字符串。SHA-256 摘要通常以二进制形式存储，但这里使用 <code>toString</code> 函数将其转换为十六进制表示。</p></li><li><p><code>.toUpperCase()</code>: 最后，这部分将得到的十六进制字符串的所有字符都转换为大写形式。这是一个常见的做法，以确保摘要的表示方式一致，因为十六进制通常用大写字母表示。</p></li><li><p>在 CryptoJS 中，<code>CryptoJS.enc.Hex</code> 编码格式用于将数据转换为十六进制字符串或从十六进制字符串解码为原始二进制数据。当使用 <code>toString(CryptoJS.enc.Hex)</code> 时，它会将数据转换为十六进制字符串，而当你使用 <code>parse</code> 方法时，它会将十六进制字符串解码为原始二进制数据。</p></li><li><p>例如，如果有一个二进制摘要，并想将其表示为十六进制字符串，可以使用 <code>toString(CryptoJS.enc.Hex)</code>。反之，如果有一个十六进制字符串并想将其解码为原始二进制数据，可以使用 <code>CryptoJS.enc.Hex.parse()</code>。</p></li></ul></li></ul><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;getZysf&quot;</span>&gt;</span>获取摘要算法<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">CryptoJS</span> <span class="keyword">from</span> <span class="string">&quot;crypto-js/crypto-js&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; reactive &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> params = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title function_">getZysf</span> = (<span class="params"></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">const</span> crytoResult = <span class="title class_">CryptoJS</span>.<span class="title class_">SHA256</span>(params)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    .<span class="title function_">toString</span>(<span class="title class_">CryptoJS</span>.<span class="property">enc</span>.<span class="property">Hex</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    .<span class="title function_">toUpperCase</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="variable language_">console</span>.<span class="title function_">log</span>(crytoResult); <span class="comment">// 4EA5C508A6566E76240543F8FEB06FD457777BE39549C4016436AFDA65D2330E</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">&quot;scss&quot;</span> <span class="attr">scoped</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>看似功能已经实现，但改数据<code>params.age=19</code>之后，发现消息摘要没有变。即：对象内部的属性值发生了改变，但结果却没有改变，这可能是因为 CryptoJS 的 SHA-256 摘要是在对象上执行的浅比较。浅比较意味着它只比较对象的引用而不比较对象内部属性的变化。</p></blockquote><ul><li>解决方法：将数据加密之前通过<code>JSON.stringify</code>转成字符串；</li></ul><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;getZysf&quot;</span>&gt;</span>获取摘要算法<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>params:&#123;&#123; params &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">CryptoJS</span> <span class="keyword">from</span> <span class="string">&quot;crypto-js/crypto-js&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; reactive &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> params = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title function_">getZysf</span> = (<span class="params"></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 如果数据是引用数据类型,CryptoJS只会看地址,不会看值;所以这里转成字符串;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">const</span> crytoResult = <span class="title class_">CryptoJS</span>.<span class="title class_">SHA256</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(params))</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    .<span class="title function_">toString</span>(<span class="title class_">CryptoJS</span>.<span class="property">enc</span>.<span class="property">Hex</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    .<span class="title function_">toUpperCase</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="variable language_">console</span>.<span class="title function_">log</span>(crytoResult); <span class="comment">// 3B8ECA7F0611E3994AC06B9560B3DD8863006D19D480FB27D8D38044BF48D634</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">&quot;scss&quot;</span> <span class="attr">scoped</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h4 id="前端代码-1"><a href="#前端代码-1" class="headerlink" title="前端代码"></a>前端代码</h4><ol><li><p>这里和后端约定好：使用SHA256，数据转为字符串加密，加密结果转十六进制且转换为大写形式；摘要放在请求头：X-Digest字段中；</p></li><li><p>安装所需第三方库</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install crypto-js</span><br></pre></td></tr></table></figure></li><li><p>新建utils，例如Crypto.js，封装对数据摘要的方法；</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">CryptoJS</span> <span class="keyword">from</span> <span class="string">&quot;crypto-js/crypto-js&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">getCtyptoJS</span> = (<span class="params">params</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> params === <span class="string">&quot;object&quot;</span>) &#123;</span><br><span class="line">    params = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(params);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> crytoResult = <span class="title class_">CryptoJS</span>.<span class="title class_">SHA256</span>(params)</span><br><span class="line">    .<span class="title function_">toString</span>(<span class="title class_">CryptoJS</span>.<span class="property">enc</span>.<span class="property">Hex</span>)</span><br><span class="line">    .<span class="title function_">toUpperCase</span>();</span><br><span class="line">  <span class="keyword">return</span> crytoResult;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li><li><p>在封装的请求拦截中，给与后端约定好的接口请求头加上X-Digest字段；</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; getCtyptoJS &#125; <span class="keyword">from</span> <span class="string">&quot;@/utils/Crypto&quot;</span>;</span><br><span class="line"><span class="comment">// 请求拦截器</span></span><br><span class="line">service.<span class="property">interceptors</span>.<span class="property">request</span>.<span class="title function_">use</span>(</span><br><span class="line">  <span class="function">(<span class="params">config</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加</span></span><br><span class="line">    <span class="comment">// config.data = JSON.stringify(config.data) //数据转化,也可以使用qs转换</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 信息摘要：</span></span><br><span class="line"><span class="comment">     * 与后端确认问题：</span></span><br><span class="line"><span class="comment">     * 1、get请求需要摘要吗?  params不需要,query需要</span></span><br><span class="line"><span class="comment">     * 2、post请求文件需要摘要吗? 需要</span></span><br><span class="line"><span class="comment">     * 最终:对接的后端说文件信息form-data获取不到,固body请求为application/json和www-form-urlencoded两种,GET请求query进行了摘要;</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 在请求被发送之前，可以在这里访问请求体数据 (body) 和 URL 参数 (params)</span></span><br><span class="line">    <span class="comment">// console.log(&quot;requUrl:&quot;, config.url);</span></span><br><span class="line">    <span class="comment">// console.log(&quot;body:&quot;, config.data, JSON.stringify(config.data)); // 这里如果是POST的form-data打印为FormData &#123;&#125;,其JSON.stringify(config.data)为 &#x27;&#123;&#125;&#x27;</span></span><br><span class="line">    <span class="comment">// console.log(&quot;query&quot;, config.params);</span></span><br><span class="line">      </span><br><span class="line">    <span class="comment">// body摘要(POST/DELETE/PUT)</span></span><br><span class="line">    <span class="keyword">const</span> interPost = config.<span class="property">data</span>;</span><br><span class="line">    <span class="comment">//这里通过JSON.stringify(config.data) !== &quot;&#123;&#125;&quot;,将form-data文件上传进行过滤;</span></span><br><span class="line">    <span class="keyword">if</span> (interPost &amp;&amp; <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(config.<span class="property">data</span>) !== <span class="string">&quot;&#123;&#125;&quot;</span>) &#123;</span><br><span class="line">      config.<span class="property">headers</span>[<span class="string">&quot;X-Digest&quot;</span>] = <span class="title function_">getCtyptoJS</span>(interPost);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// get?之后数据的摘要</span></span><br><span class="line">    <span class="keyword">const</span> interGetQuery = config.<span class="property">params</span>;</span><br><span class="line">    <span class="keyword">if</span> (interGetQuery) &#123;</span><br><span class="line">      config.<span class="property">headers</span>[<span class="string">&quot;X-Digest&quot;</span>] = <span class="title function_">getCtyptoJS</span>(interGetQuery);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 访问文件数据，通常需要使用 FormData 对象来构建请求体</span></span><br><span class="line">    <span class="comment">// if (config.data instanceof FormData) &#123;</span></span><br><span class="line">    <span class="comment">//   const formDataParams = &#123;&#125;;</span></span><br><span class="line">    <span class="comment">//   // 遍历 FormData 对象的键值对</span></span><br><span class="line">    <span class="comment">//   config.data.forEach((value, key) =&gt; &#123;</span></span><br><span class="line">    <span class="comment">//     formDataParams[key] = value;</span></span><br><span class="line">    <span class="comment">//     // if (value instanceof File) &#123;</span></span><br><span class="line">    <span class="comment">//     //   console.log(&quot;File:&quot;, key, value);</span></span><br><span class="line">    <span class="comment">//     // &#125;</span></span><br><span class="line">    <span class="comment">//   &#125;);</span></span><br><span class="line">    <span class="comment">//   // console.log(&quot;formDataParams&quot;, formDataParams);</span></span><br><span class="line">    <span class="comment">//   config.headers[&quot;X-Digest&quot;] = getCtyptoJS(formDataParams);</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="title class_">Promise</span>.<span class="title function_">reject</span>(error);</span><br><span class="line">  &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure></li><li><p>查看与后端约定好的接口请求头上，是否包含了X-Digest字段；</p></li><li><p>通过postman工具，进行抓包，修改数据，请求；(这里如果防重放和数据摘要都做了，可以通过断网的方式”避开”防重放)；</p></li><li><p>如果出了问题，大概率是前后端摘要的数据不一样导致的摘要值不同。(可能为特殊字符转码问题，数据类型不一致问题等；可以将前后端摘要的数据进行对比，进行问题的排查)；</p></li><li><p>至此，整个功能已实现。一般来说仅对POST&#x2F;DELETE&#x2F;PUT等这样能够影响到数据的做摘要处理。</p></li><li><p>其实以上代码仅对一部分接口(body、query)进行了摘要处理，而对于params参数的接口未做处理，例如:<code>delete/:id</code>；可以通过摘要<code>请求数据+接口</code>的方式做更进一步的摘要处理。我们这里没有这样做；(我懒(不是))；</p></li><li><p>这里说一下，为什么log打印的上传文件为FormData {}，而使用 FormData 对象来构建请求体就能够拿到数据；</p><blockquote><p>在 JavaScript 中，console.log 可能会以异步方式处理对象的输出，这意味着在某些情况下，当直接使用 console.log(config.data) 时，可能看不到数据。这是因为在异步处理期间，config.data 的值可能已经发生了变化或被修改。这种情况在某些情况下特别适用于 FormData 对象，因为它可以在异步上下文中使用。</p><p>通过使用 forEach 方法，实际上迫使 JavaScript 立即处理对象，因此你能够遍历 FormData 对象的键值对并查看其中的数据。这种方法确保了能够在遍历过程中查看正确的数据。</p></blockquote></li></ol><h2 id="SourceMap"><a href="#SourceMap" class="headerlink" title="SourceMap"></a>SourceMap</h2><ul><li>背景：系统安全功能验证报告中指出：生产环境前端源代码泄露；</li><li>前端环境：webpack，vue&#x2F;cli4.5.15，vue2.6、node16.18.0；</li><li>现象：跟源代码不一致，但是有八分相像；</li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/sourcemap01.jpg" alt="sourcemap1"></p><h3 id="什么是source-map"><a href="#什么是source-map" class="headerlink" title="什么是source map"></a>什么是source map</h3><p>参考文献：<a href="https://juejin.cn/post/7016510600960278565">一文看懂 webpack 的所有 source map</a> ，<a href="https://juejin.cn/post/7245536612628971581">什么是SourceMap？webpack devtool超详细解析</a>，<a href="https://mp.weixin.qq.com/s/XPqt7NsfItlnBndyQ4Pk-g">Webpack 性能优化</a>；</p><blockquote><p>现代的前端开发总是伴随的各种框架， 在使用这些框架开发的代码需要经过编译才可以在生产环节使用， 编译后就伴随着可读性的降低，也会影响我们的错误调试。 那source map就是为了解决这个问题。</p><p>Source map可以理解为一个地图， 通过它可以获知编译后的代码 对应编译前的代码位置。这样当代码遇到异常， 我们就可以通过报错信息定位至准确的位置。 同时在浏览器 sources 也可以查看到源码。</p></blockquote><p>编译后的代码内只需要包含这样一句：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// @ sourceMappingURL=map文件路径</span></span><br></pre></td></tr></table></figure><p>就可以关联上 source map文件了;</p><h3 id="修改"><a href="#修改" class="headerlink" title="修改"></a>修改</h3><p>这里对<code>vue.config.js</code>进行了修改；(具体可查阅上方参考文献)；</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">lintOnSave</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">    生产环境设置nosources-source-map(看不到代码,但是报错能看到报错的代码行号);</span></span><br><span class="line"><span class="comment">    研发环境不做处理;</span></span><br><span class="line"><span class="comment">  */</span> </span><br><span class="line">  <span class="attr">configureWebpack</span>:</span><br><span class="line">    process.<span class="property">env</span>.<span class="property">NODE_ENV</span> === <span class="string">&quot;production&quot;</span></span><br><span class="line">      ? &#123;</span><br><span class="line">          <span class="attr">devtool</span>: <span class="string">&quot;nosources-source-map&quot;</span>,</span><br><span class="line">        &#125;</span><br><span class="line">      : &#123;&#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>修改完之后，生产环境现象如下：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/sourcemap02.png" alt="sourcemap2"></p><h2 id="Nginx相关"><a href="#Nginx相关" class="headerlink" title="Nginx相关"></a>Nginx相关</h2><h3 id="TLS低于1-2"><a href="#TLS低于1-2" class="headerlink" title="TLS低于1.2"></a>TLS低于1.2</h3><blockquote><p>网站通过mkcert+nginx生成了https站点(<a href="https://fsllala.top/articles/3ef665a6">详见</a>)，虽然页面上显示使用的是TLS1.3，但是第三方检测机构检测出来同时使用了TLS1.0和1.1，此协议同SSL协议一样，较危险，建议升级到TLS1.2及以上；</p></blockquote><ul><li><p>环境与工具：Centos、FinalShell，nmap(开源检测工具)；</p></li><li><p>安装：<code>sudo yum install nmap</code></p></li><li><p>查看SSL&#x2F;TLS：<code>nmap --script +ssl-enum-ciphers -p port ip</code></p></li><li><p>修改nginx：</p><figure class="highlight nginx"><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"><span class="section">server</span> &#123;</span><br><span class="line">  <span class="attribute">ssl_protocols</span> TLSv1.<span class="number">3</span>;  <span class="comment"># 只启用TLS1.3协议版本 (window可以在一行写 1.2 1.3;linux需要写两行ssl_protocol TLSv1.2/3)</span></span><br><span class="line">  <span class="comment"># 其他SSL配置项...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><div class="tabs" id="tlschange"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tlschange-1">修改前</button></li><li class="tab"><button type="button" data-href="#tlschange-2">修改后</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tlschange-1"><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/TLS01.png" alt="nmap1"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tlschange-2"><p><strong><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/TLS02.png" alt="nmap2"></strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div></li></ul><h3 id="ngnix版本号暴露"><a href="#ngnix版本号暴露" class="headerlink" title="ngnix版本号暴露"></a>ngnix版本号暴露</h3><p>修改nginx</p><figure class="highlight nginx"><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"><span class="section">http</span> &#123;</span><br><span class="line">    <span class="attribute">server_tokens</span> <span class="literal">off</span>;</span><br><span class="line">    <span class="comment"># 其他配置...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="iframe可以嵌套"><a href="#iframe可以嵌套" class="headerlink" title="iframe可以嵌套"></a>iframe可以嵌套</h3><blockquote><p>期望：通过iframe不能嵌套该网站；</p></blockquote><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="section">server</span> &#123;</span><br><span class="line">    <span class="attribute">listen</span> <span class="number">80</span>;</span><br><span class="line">    <span class="attribute">server_name</span> yourdomain.com;</span><br><span class="line"></span><br><span class="line">    <span class="section">location</span> / &#123;</span><br><span class="line">        <span class="attribute">add_header</span> X-Frame-Options <span class="string">&quot;DENY&quot;</span>; <span class="comment"># 加上介个</span></span><br><span class="line">        <span class="comment"># 其他服务器配置...</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+        <content type="html"><![CDATA[<h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2><p>网站做完之后，移交给第三方机构进行安全检测，对”安全功能验证观察报告”指出的问题进行了如下修改；</p><h2 id="接口重放"><a href="#接口重放" class="headerlink" title="接口重放"></a>接口重放</h2><h3 id="什么是重放"><a href="#什么是重放" class="headerlink" title="什么是重放"></a>什么是重放</h3><p>参考文献：<a href="https://blog.csdn.net/koastal/article/details/53456696?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-53456696-blog-114984526.235%5Ev38%5Epc_relevant_anti_t3_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-53456696-blog-114984526.235%5Ev38%5Epc_relevant_anti_t3_base&utm_relevant_index=4">基于timestamp和nonce的防止重放攻击方案</a></p><blockquote><p>重放攻击指的是攻击者通过发送一个目的主机已接受到的包，来达到欺骗系统的目的。其基本原理就是把窃听到的数据原封不动的重新发送给接收方(好像修改了数据在发送就不叫重放了)，即使传输的数据是加密的，窃听方不知道具体的数据内容，但是容易知道数据的作用（即使不知道作用也能对系统造成一定破坏），这时就能通过原封不动的重新发送达到一定的目的，比如：</p></blockquote><ul><li>影响数据： 重放添加接口可能会无限添加数据；</li><li>数据泄漏： 攻击者可以重复访问敏感数据，导致数据泄漏；</li><li>资源耗尽： 重复请求可能导致服务器资源的枯竭，影响正常用户的服务；</li><li>身份伪装： 通过重复使用合法用户的身份验证凭据，攻击者可以伪装成合法用户执行操作；</li></ul><h3 id="如何防止重放"><a href="#如何防止重放" class="headerlink" title="如何防止重放"></a>如何防止重放</h3><p>给每个请求加上不可复制、不可模仿的唯一标识：时间戳+随机数并加密；</p><ul><li>时间戳<ul><li>优点：服务端对请求时间戳进行判断，如超过半分钟，认定为重放攻击，请求无效；</li><li>缺点：时间戳无法完全防止重放攻击。未认证系统还是可以在这半分钟的内，通过截获请求、重放请求来调用接口。并且认证双方需要准确的时间同步，同步越好，受攻击的可能性就越小。但当系统很庞大，跨越的区域较广时，要做到精确的时间同步并不是很容易。</li></ul></li><li>随机数<ul><li>优点：认证双方不需要时间同步，Redis缓存中如果有使用过的随机数，就认为是重放攻击；</li><li>缺点：需要保存所有使用过的随机数，若记录的时间段较长，则保存和查询的开销较大；</li></ul></li><li>时间戳+随机数并加密<ul><li>优点：超过半分钟，通过时间戳认定为重放攻击，请求无效；半分钟内，通过Redis存储的随机数认定为重放攻击，请求无效，超过半分钟，释放Redis随机数，避免存储大量数据；</li></ul></li></ul><h3 id="具体方案"><a href="#具体方案" class="headerlink" title="具体方案"></a>具体方案</h3><p>大致流程：</p><ol><li>前端：登录前先请求接口获取服务器时间，与本地时间比对，保存时间差；(这里不直接用前端的本地时间，是因为担心服务器时间与客户端时间存在偏差，前端通过此接口获取时间差并保存；之后所有接口防重放的时间戳都直接通过前端本地时间+校验时间差获取，即：获取服务器时间的接口只需要请求一次)；</li><li>前端：根据时间差校正本地时间，用校正后的本地时间拼接上随机数加密(生成的随机数需保证30s内不重复(可为唯一值)，加密使用RSA的公钥)，得到nonce（唯一标识）；</li><li>前端：将nonce放入API请求的请求头进行请求；</li><li>后端：在GateWay获取到请求头的nonce并解密；</li><li>后端：将解密后的时间戳与本地(服务端)时间做对比，若相差不超过30s则认为请求有效，否则认为请求超时（不返回结果）；</li><li>后端：若时间戳校验通过，则通过redis判断随机数是否在redis中，若不存在则认为请求有效并把随机数保存到redis中，过期时间设置为30s, 若存在则认为请求无效（不返回结果）；</li></ol><h3 id="时序图"><a href="#时序图" class="headerlink" title="时序图"></a>时序图</h3><p><img src="https://img.fsllala.top/deReplay.png" alt="nonce"></p><h3 id="前端代码"><a href="#前端代码" class="headerlink" title="前端代码"></a>前端代码</h3><p>参考文献：<a href="https://www.jb51.net/javascript/295944dtv.htm">前端利用jsencrypt.js进行RSA加密示例详解</a></p><ol><li><p>这里使用到了RSA加密，需要后端传给前端公钥(我们公司直接后端给的，没有用接口传递)，前端通过jsencrypt加密；</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install jsencrypt </span><br></pre></td></tr></table></figure></li><li><p>新建utils，例如JSEncrypt.js，封装对数据加密的方法；</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">JSEncrypt</span> &#125; <span class="keyword">from</span> <span class="string">&quot;jsencrypt&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">passwordEncryption</span>(<span class="params">passwordUser</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> publicKey =<span class="string">&quot;公钥&quot;</span>; <span class="comment">// 从后台获取公钥，这个保存一下，在这里用。</span></span><br><span class="line">    <span class="keyword">let</span> encryptor = <span class="keyword">new</span> <span class="title class_">JSEncrypt</span>(); <span class="comment">// 新建JSEncrypt对象</span></span><br><span class="line">    encryptor.<span class="title function_">setPublicKey</span>(publicKey); <span class="comment">// 设置公钥</span></span><br><span class="line">    <span class="keyword">let</span> passwordEncryp = encryptor.<span class="title function_">encrypt</span>(passwordUser); <span class="comment">// 对数据进行加密</span></span><br><span class="line">    <span class="keyword">return</span> passwordEncryp;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure></li><li><p>登录的时候，请求接口获取服务器时间，与本地时间比对，保存时间差到缓存；</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">formData</span>.<span class="title function_">validate</span>(<span class="keyword">async</span> (valid) =&gt; &#123;</span><br><span class="line">  <span class="keyword">if</span> (valid) &#123;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> res = <span class="keyword">await</span> <span class="title function_">identityReplayPrevention</span>(); <span class="comment">// 请求接口,获取服务端的时间;</span></span><br><span class="line">      <span class="keyword">if</span> (res.<span class="property">code</span> == <span class="number">0</span>) &#123;</span><br><span class="line">          <span class="comment">/**</span></span><br><span class="line"><span class="comment">           时间差</span></span><br><span class="line"><span class="comment">           这里需要注意:如果时间差=服务器时间戳-本地时间戳,则校正后的时间戳为本地时间戳+时间差;</span></span><br><span class="line"><span class="comment">                       如果时间差=本地时间戳-服务器时间戳,则校正后的时间戳为本地时间戳-时间差;</span></span><br><span class="line"><span class="comment">                       (可以举个例子:本地时间200,服务器时间400...)</span></span><br><span class="line"><span class="comment">          */</span> </span><br><span class="line">        <span class="keyword">const</span> verificationTimeDifference = res.<span class="property">data</span> - <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>();</span><br><span class="line">        sessionStorage.<span class="title function_">setItem</span>(<span class="string">&quot;verificationTimeDifference&quot;</span>,verificationTimeDifference);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">$message</span>.<span class="title function_">warning</span>(res.<span class="property">message</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">error</span>(error);</span><br><span class="line">    &#125;</span><br><span class="line">      <span class="comment">// 登录逻辑</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li><li><p>新建utils，例如getNonce.js，封装校正后的时间戳+随机数加密方法；</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; passwordEncryption &#125; <span class="keyword">from</span> <span class="string">&quot;@/utils/JSEncrypt.js&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">getNonceVal</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> verificationTimeDifference = <span class="title class_">Number</span>(sessionStorage.<span class="title function_">getItem</span>(<span class="string">&quot;verificationTimeDifference&quot;</span>)); <span class="comment">//获取时间差</span></span><br><span class="line">  <span class="comment">// 由于防重放改为了整个系统,这里随机数为唯一值;</span></span><br><span class="line">  <span class="keyword">const</span> randomNum = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>() + <span class="string">&quot;&quot;</span> + <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">30000</span>);<span class="comment">//唯一值</span></span><br><span class="line">  <span class="keyword">const</span> timeNow = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>() + verificationTimeDifference;<span class="comment">// 校正后的时间戳</span></span><br><span class="line">  <span class="keyword">const</span> fakeResult = <span class="string">`<span class="subst">$&#123;timeNow&#125;</span>_<span class="subst">$&#123;randomNum&#125;</span>`</span>; <span class="comment">// 校正后的时间戳_随机数</span></span><br><span class="line">  <span class="keyword">const</span> result = <span class="title function_">passwordEncryption</span>(fakeResult); <span class="comment">// 加密</span></span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li><li><p>在封装的请求拦截中，给每个请求的请求头加上nonce字段，值为：加密(校正后的时间戳_随机数)；</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; getNonceVal &#125; <span class="keyword">from</span> <span class="string">&quot;@/utils/getNonce.js&quot;</span>;</span><br><span class="line"><span class="comment">// 请求拦截器</span></span><br><span class="line">service.<span class="property">interceptors</span>.<span class="property">request</span>.<span class="title function_">use</span>(</span><br><span class="line">  <span class="function">(<span class="params">config</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加</span></span><br><span class="line">    <span class="comment">// config.data = JSON.stringify(config.data) //数据转化,也可以使用qs转换</span></span><br><span class="line">      </span><br><span class="line">     <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 防重放处理</span></span><br><span class="line"><span class="comment">     * 为了防止防重放的接口噶了,导致防重放功能失效;处理如下:</span></span><br><span class="line"><span class="comment">     * 前端:如果缓存里面没有时间差,就不在请求头上带nonce;</span></span><br><span class="line"><span class="comment">     * 后端:除了获取时间差的接口请求头可以没有nonce,别的接口如果请求头没有nonce字段,就是非法请求;</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">const</span> verificationTimeDifference = sessionStorage.<span class="title function_">getItem</span>(<span class="string">&quot;verificationTimeDifference&quot;</span>);</span><br><span class="line">    <span class="keyword">if</span>(verificationTimeDifference)&#123;</span><br><span class="line">      config.<span class="property">headers</span>.<span class="property">nonce</span> = <span class="title function_">getNonceVal</span>();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//...其他处理</span></span><br><span class="line">    <span class="comment">//如有需要：注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie</span></span><br><span class="line">    <span class="keyword">const</span> token = sessionStorage.<span class="title function_">getItem</span>(<span class="string">&quot;token&quot;</span>); <span class="comment">//这里取token之前，你肯定需要先拿到token,存一下</span></span><br><span class="line">    <span class="keyword">if</span> (token) &#123;</span><br><span class="line">      config.<span class="property">headers</span>.<span class="property">Authorization</span> = <span class="string">&quot;bearer &quot;</span> + token; <span class="comment">//如果要求携带在请求头中</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="title class_">Promise</span>.<span class="title function_">reject</span>(error);</span><br><span class="line">  &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure></li><li><p>查看每个接口的请求头，是否包含了nonce字段，因为每个接口请求的时间肯定不一样(毫秒级时间戳)，所以每个接口的nonce值都不一样；(即使相同的数据，每次加密结果也不一样)；</p></li><li><p>通过postman工具，进行抓包重放；(如果还能正常返回数据，后端的锅，去跟后端battle)；</p></li></ol><h2 id="数据完整性校验"><a href="#数据完整性校验" class="headerlink" title="数据完整性校验"></a>数据完整性校验</h2><blockquote><p>接口加了防重放就安全了吗？答案是否定的。防重放仅能阻止重放请求，不能保证请求数据不被篡改。比如：我在浏览器请求接口前设置为断网，然后请求该接口，此时我能拿到该请求所需的所有参数，并且这个请求是到达不了服务端的，也就是Redis没有此次请求的随机数，那么我只要在规定的时间间隔内，修改请求数据，发送请求是可以正常返回数据的。</p></blockquote><h3 id="消息摘要"><a href="#消息摘要" class="headerlink" title="消息摘要"></a>消息摘要</h3><blockquote><p>对数据完整性作叫校验，保证请求的数据在传输过程中未被修改；</p></blockquote><p>参考文献：<a href="https://www.cnblogs.com/gavincoder/p/13622224.html">深入理解-信息加密&#x2F;信息摘要&#x2F;数字签名</a>，<a href="https://blog.csdn.net/w1673492580/article/details/113524908">消息摘要、各种加密方式的简要说明</a></p><ul><li>消息摘要通常采用哈希&#x2F;散列算法生成，比如MD5、SHA、MAC系列，是一种不可逆的单向算法，它可以把任意长度的信息，生成固定长度的摘要，这个摘要是唯一的，任何对输入数据稍作更改都会导致不同的摘要；并且无法通过摘要信息反向解析出原始数据。所以消息摘要一般用来确保数据传输过程中的完整性、不可还原的密码存储；</li><li>消息摘要用于生成数据的”指纹”，其算法的主要特征是加密过程不需要密钥，并且经过加密的数据无法被解密；</li><li>发送方在传输时，需要将原始数据与摘要信息同时传递给接收方，接收方再对原始数据进行同样的处理得到新的摘要信息，通过对比两个摘要信息是否一样，即可判断数据在传输过程中是否有被修改。 当然，双方需要提前约定好摘要信息的生成规则；</li></ul><h4 id="具体方案-1"><a href="#具体方案-1" class="headerlink" title="具体方案"></a>具体方案</h4><blockquote><p>如果你希望验证整个请求体的完整性，包括请求中的文件数据，通常是通过将整个请求体进行哈希处理（包括文件数据和其他元数据）来生成一个摘要值，然后将该摘要值放在请求头或请求体中一同发送给后端。这样可以确保请求体在传输过程中未被篡改。</p></blockquote><p>大致流程：</p><ol><li>前端将请求体的所有内容（包括文件数据和其他元数据）进行哈希处理，生成一个摘要值；</li><li>将该摘要值放在请求头中，例如，可以使用自定义请求头；</li><li>发送请求至后端，包括请求头和请求体；</li><li>后端接收请求后，提取请求头中的摘要值；</li><li>后端再次对整个请求体进行哈希处理，生成一个新的摘要值；</li><li>后端将前端提供的摘要值与自己生成的摘要值进行比较，以验证请求体的完整性；</li></ol><ul><li>这种方法确保了请求体中的所有内容都被包括在摘要计算中，因此即使请求体中的任何部分被篡改，摘要值也会不同，从而使后端能够检测到篡改；</li><li>需要注意的是，这需要前端和后端都遵守相同的摘要算法和相同的计算方法，以便正确验证请求体的完整性。另外，这种方式会增加请求的计算和处理负担，特别是对于大文件的情况；</li></ul><h4 id="时序图-1"><a href="#时序图-1" class="headerlink" title="时序图"></a>时序图</h4><p><img src="https://img.fsllala.top/messageZhaiYao.png" alt="zhaiyao"></p><h4 id="基本代码"><a href="#基本代码" class="headerlink" title="基本代码"></a>基本代码</h4><ul><li>安装 crypto-js</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install crypto-js</span><br></pre></td></tr></table></figure><ul><li><p>使用：<code>const crytoResult = CryptoJS.SHA256(params).toString(CryptoJS.enc.Hex).toUpperCase();</code></p></li><li><p>解释：</p><ul><li><p><code>CryptoJS.SHA256(params)</code>: 这部分使用 CryptoJS 库中的 <code>SHA256</code> 函数来计算输入 <code>params</code> 的 SHA-256 摘要。SHA-256 是一种散列函数，它将输入数据转换为固定长度的散列值，通常为 64 个字符的十六进制字符串。</p></li><li><p><code>.toString(CryptoJS.enc.Hex)</code>: 这部分将计算得到的 SHA-256 摘要转换为一个十六进制字符串。SHA-256 摘要通常以二进制形式存储，但这里使用 <code>toString</code> 函数将其转换为十六进制表示。</p></li><li><p><code>.toUpperCase()</code>: 最后，这部分将得到的十六进制字符串的所有字符都转换为大写形式。这是一个常见的做法，以确保摘要的表示方式一致，因为十六进制通常用大写字母表示。</p></li><li><p>在 CryptoJS 中，<code>CryptoJS.enc.Hex</code> 编码格式用于将数据转换为十六进制字符串或从十六进制字符串解码为原始二进制数据。当使用 <code>toString(CryptoJS.enc.Hex)</code> 时，它会将数据转换为十六进制字符串，而当你使用 <code>parse</code> 方法时，它会将十六进制字符串解码为原始二进制数据。</p></li><li><p>例如，如果有一个二进制摘要，并想将其表示为十六进制字符串，可以使用 <code>toString(CryptoJS.enc.Hex)</code>。反之，如果有一个十六进制字符串并想将其解码为原始二进制数据，可以使用 <code>CryptoJS.enc.Hex.parse()</code>。</p></li></ul></li></ul><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;getZysf&quot;</span>&gt;</span>获取摘要算法<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">CryptoJS</span> <span class="keyword">from</span> <span class="string">&quot;crypto-js/crypto-js&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; reactive &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> params = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title function_">getZysf</span> = (<span class="params"></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">const</span> crytoResult = <span class="title class_">CryptoJS</span>.<span class="title class_">SHA256</span>(params)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    .<span class="title function_">toString</span>(<span class="title class_">CryptoJS</span>.<span class="property">enc</span>.<span class="property">Hex</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    .<span class="title function_">toUpperCase</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="variable language_">console</span>.<span class="title function_">log</span>(crytoResult); <span class="comment">// 4EA5C508A6566E76240543F8FEB06FD457777BE39549C4016436AFDA65D2330E</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">&quot;scss&quot;</span> <span class="attr">scoped</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>看似功能已经实现，但改数据<code>params.age=19</code>之后，发现消息摘要没有变。即：对象内部的属性值发生了改变，但结果却没有改变，这可能是因为 CryptoJS 的 SHA-256 摘要是在对象上执行的浅比较。浅比较意味着它只比较对象的引用而不比较对象内部属性的变化。</p></blockquote><ul><li>解决方法：将数据加密之前通过<code>JSON.stringify</code>转成字符串；</li></ul><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;getZysf&quot;</span>&gt;</span>获取摘要算法<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>params:&#123;&#123; params &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">CryptoJS</span> <span class="keyword">from</span> <span class="string">&quot;crypto-js/crypto-js&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; reactive &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> params = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title function_">getZysf</span> = (<span class="params"></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 如果数据是引用数据类型,CryptoJS只会看地址,不会看值;所以这里转成字符串;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">const</span> crytoResult = <span class="title class_">CryptoJS</span>.<span class="title class_">SHA256</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(params))</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    .<span class="title function_">toString</span>(<span class="title class_">CryptoJS</span>.<span class="property">enc</span>.<span class="property">Hex</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    .<span class="title function_">toUpperCase</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="variable language_">console</span>.<span class="title function_">log</span>(crytoResult); <span class="comment">// 3B8ECA7F0611E3994AC06B9560B3DD8863006D19D480FB27D8D38044BF48D634</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">&quot;scss&quot;</span> <span class="attr">scoped</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h4 id="前端代码-1"><a href="#前端代码-1" class="headerlink" title="前端代码"></a>前端代码</h4><ol><li><p>这里和后端约定好：使用SHA256，数据转为字符串加密，加密结果转十六进制且转换为大写形式；摘要放在请求头：X-Digest字段中；</p></li><li><p>安装所需第三方库</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install crypto-js</span><br></pre></td></tr></table></figure></li><li><p>新建utils，例如Crypto.js，封装对数据摘要的方法；</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">CryptoJS</span> <span class="keyword">from</span> <span class="string">&quot;crypto-js/crypto-js&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">getCtyptoJS</span> = (<span class="params">params</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> params === <span class="string">&quot;object&quot;</span>) &#123;</span><br><span class="line">    params = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(params);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> crytoResult = <span class="title class_">CryptoJS</span>.<span class="title class_">SHA256</span>(params)</span><br><span class="line">    .<span class="title function_">toString</span>(<span class="title class_">CryptoJS</span>.<span class="property">enc</span>.<span class="property">Hex</span>)</span><br><span class="line">    .<span class="title function_">toUpperCase</span>();</span><br><span class="line">  <span class="keyword">return</span> crytoResult;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li><li><p>在封装的请求拦截中，给与后端约定好的接口请求头加上X-Digest字段；</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; getCtyptoJS &#125; <span class="keyword">from</span> <span class="string">&quot;@/utils/Crypto&quot;</span>;</span><br><span class="line"><span class="comment">// 请求拦截器</span></span><br><span class="line">service.<span class="property">interceptors</span>.<span class="property">request</span>.<span class="title function_">use</span>(</span><br><span class="line">  <span class="function">(<span class="params">config</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加</span></span><br><span class="line">    <span class="comment">// config.data = JSON.stringify(config.data) //数据转化,也可以使用qs转换</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 信息摘要：</span></span><br><span class="line"><span class="comment">     * 与后端确认问题：</span></span><br><span class="line"><span class="comment">     * 1、get请求需要摘要吗?  params不需要,query需要</span></span><br><span class="line"><span class="comment">     * 2、post请求文件需要摘要吗? 需要</span></span><br><span class="line"><span class="comment">     * 最终:对接的后端说文件信息form-data获取不到,固body请求为application/json和www-form-urlencoded两种,GET请求query进行了摘要;</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 在请求被发送之前，可以在这里访问请求体数据 (body) 和 URL 参数 (params)</span></span><br><span class="line">    <span class="comment">// console.log(&quot;requUrl:&quot;, config.url);</span></span><br><span class="line">    <span class="comment">// console.log(&quot;body:&quot;, config.data, JSON.stringify(config.data)); // 这里如果是POST的form-data打印为FormData &#123;&#125;,其JSON.stringify(config.data)为 &#x27;&#123;&#125;&#x27;</span></span><br><span class="line">    <span class="comment">// console.log(&quot;query&quot;, config.params);</span></span><br><span class="line">      </span><br><span class="line">    <span class="comment">// body摘要(POST/DELETE/PUT)</span></span><br><span class="line">    <span class="keyword">const</span> interPost = config.<span class="property">data</span>;</span><br><span class="line">    <span class="comment">//这里通过JSON.stringify(config.data) !== &quot;&#123;&#125;&quot;,将form-data文件上传进行过滤;</span></span><br><span class="line">    <span class="keyword">if</span> (interPost &amp;&amp; <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(config.<span class="property">data</span>) !== <span class="string">&quot;&#123;&#125;&quot;</span>) &#123;</span><br><span class="line">      config.<span class="property">headers</span>[<span class="string">&quot;X-Digest&quot;</span>] = <span class="title function_">getCtyptoJS</span>(interPost);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// get?之后数据的摘要</span></span><br><span class="line">    <span class="keyword">const</span> interGetQuery = config.<span class="property">params</span>;</span><br><span class="line">    <span class="keyword">if</span> (interGetQuery) &#123;</span><br><span class="line">      config.<span class="property">headers</span>[<span class="string">&quot;X-Digest&quot;</span>] = <span class="title function_">getCtyptoJS</span>(interGetQuery);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 访问文件数据，通常需要使用 FormData 对象来构建请求体</span></span><br><span class="line">    <span class="comment">// if (config.data instanceof FormData) &#123;</span></span><br><span class="line">    <span class="comment">//   const formDataParams = &#123;&#125;;</span></span><br><span class="line">    <span class="comment">//   // 遍历 FormData 对象的键值对</span></span><br><span class="line">    <span class="comment">//   config.data.forEach((value, key) =&gt; &#123;</span></span><br><span class="line">    <span class="comment">//     formDataParams[key] = value;</span></span><br><span class="line">    <span class="comment">//     // if (value instanceof File) &#123;</span></span><br><span class="line">    <span class="comment">//     //   console.log(&quot;File:&quot;, key, value);</span></span><br><span class="line">    <span class="comment">//     // &#125;</span></span><br><span class="line">    <span class="comment">//   &#125;);</span></span><br><span class="line">    <span class="comment">//   // console.log(&quot;formDataParams&quot;, formDataParams);</span></span><br><span class="line">    <span class="comment">//   config.headers[&quot;X-Digest&quot;] = getCtyptoJS(formDataParams);</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="title class_">Promise</span>.<span class="title function_">reject</span>(error);</span><br><span class="line">  &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure></li><li><p>查看与后端约定好的接口请求头上，是否包含了X-Digest字段；</p></li><li><p>通过postman工具，进行抓包，修改数据，请求；(这里如果防重放和数据摘要都做了，可以通过断网的方式”避开”防重放)；</p></li><li><p>如果出了问题，大概率是前后端摘要的数据不一样导致的摘要值不同。(可能为特殊字符转码问题，数据类型不一致问题等；可以将前后端摘要的数据进行对比，进行问题的排查)；</p></li><li><p>至此，整个功能已实现。一般来说仅对POST&#x2F;DELETE&#x2F;PUT等这样能够影响到数据的做摘要处理。</p></li><li><p>其实以上代码仅对一部分接口(body、query)进行了摘要处理，而对于params参数的接口未做处理，例如:<code>delete/:id</code>；可以通过摘要<code>请求数据+接口</code>的方式做更进一步的摘要处理。我们这里没有这样做；(我懒(不是))；</p></li><li><p>这里说一下，为什么log打印的上传文件为FormData {}，而使用 FormData 对象来构建请求体就能够拿到数据；</p><blockquote><p>在 JavaScript 中，console.log 可能会以异步方式处理对象的输出，这意味着在某些情况下，当直接使用 console.log(config.data) 时，可能看不到数据。这是因为在异步处理期间，config.data 的值可能已经发生了变化或被修改。这种情况在某些情况下特别适用于 FormData 对象，因为它可以在异步上下文中使用。</p><p>通过使用 forEach 方法，实际上迫使 JavaScript 立即处理对象，因此你能够遍历 FormData 对象的键值对并查看其中的数据。这种方法确保了能够在遍历过程中查看正确的数据。</p></blockquote></li></ol><h2 id="SourceMap"><a href="#SourceMap" class="headerlink" title="SourceMap"></a>SourceMap</h2><ul><li>背景：系统安全功能验证报告中指出：生产环境前端源代码泄露；</li><li>前端环境：webpack，vue&#x2F;cli4.5.15，vue2.6、node16.18.0；</li><li>现象：跟源代码不一致，但是有八分相像；</li></ul><p><img src="https://img.fsllala.top/sourcemap01.jpg" alt="sourcemap1"></p><h3 id="什么是source-map"><a href="#什么是source-map" class="headerlink" title="什么是source map"></a>什么是source map</h3><p>参考文献：<a href="https://juejin.cn/post/7016510600960278565">一文看懂 webpack 的所有 source map</a> ，<a href="https://juejin.cn/post/7245536612628971581">什么是SourceMap？webpack devtool超详细解析</a>，<a href="https://mp.weixin.qq.com/s/XPqt7NsfItlnBndyQ4Pk-g">Webpack 性能优化</a>；</p><blockquote><p>现代的前端开发总是伴随的各种框架， 在使用这些框架开发的代码需要经过编译才可以在生产环节使用， 编译后就伴随着可读性的降低，也会影响我们的错误调试。 那source map就是为了解决这个问题。</p><p>Source map可以理解为一个地图， 通过它可以获知编译后的代码 对应编译前的代码位置。这样当代码遇到异常， 我们就可以通过报错信息定位至准确的位置。 同时在浏览器 sources 也可以查看到源码。</p></blockquote><p>编译后的代码内只需要包含这样一句：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// @ sourceMappingURL=map文件路径</span></span><br></pre></td></tr></table></figure><p>就可以关联上 source map文件了;</p><h3 id="修改"><a href="#修改" class="headerlink" title="修改"></a>修改</h3><p>这里对<code>vue.config.js</code>进行了修改；(具体可查阅上方参考文献)；</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">lintOnSave</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">    生产环境设置nosources-source-map(看不到代码,但是报错能看到报错的代码行号);</span></span><br><span class="line"><span class="comment">    研发环境不做处理;</span></span><br><span class="line"><span class="comment">  */</span> </span><br><span class="line">  <span class="attr">configureWebpack</span>:</span><br><span class="line">    process.<span class="property">env</span>.<span class="property">NODE_ENV</span> === <span class="string">&quot;production&quot;</span></span><br><span class="line">      ? &#123;</span><br><span class="line">          <span class="attr">devtool</span>: <span class="string">&quot;nosources-source-map&quot;</span>,</span><br><span class="line">        &#125;</span><br><span class="line">      : &#123;&#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>修改完之后，生产环境现象如下：</p><p><img src="https://img.fsllala.top/sourcemap02.png" alt="sourcemap2"></p><h2 id="Nginx相关"><a href="#Nginx相关" class="headerlink" title="Nginx相关"></a>Nginx相关</h2><h3 id="TLS低于1-2"><a href="#TLS低于1-2" class="headerlink" title="TLS低于1.2"></a>TLS低于1.2</h3><blockquote><p>网站通过mkcert+nginx生成了https站点(<a href="https://fsllala.top/articles/3ef665a6">详见</a>)，虽然页面上显示使用的是TLS1.3，但是第三方检测机构检测出来同时使用了TLS1.0和1.1，此协议同SSL协议一样，较危险，建议升级到TLS1.2及以上；</p></blockquote><ul><li><p>环境与工具：Centos、FinalShell，nmap(开源检测工具)；</p></li><li><p>安装：<code>sudo yum install nmap</code></p></li><li><p>查看SSL&#x2F;TLS：<code>nmap --script +ssl-enum-ciphers -p port ip</code></p></li><li><p>修改nginx：</p><figure class="highlight nginx"><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"><span class="section">server</span> &#123;</span><br><span class="line">  <span class="attribute">ssl_protocols</span> TLSv1.<span class="number">3</span>;  <span class="comment"># 只启用TLS1.3协议版本 (window可以在一行写 1.2 1.3;linux需要写两行ssl_protocol TLSv1.2/3)</span></span><br><span class="line">  <span class="comment"># 其他SSL配置项...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><div class="tabs" id="tlschange"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tlschange-1">修改前</button></li><li class="tab"><button type="button" data-href="#tlschange-2">修改后</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tlschange-1"><p><img src="https://img.fsllala.top/TLS01.png" alt="nmap1"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tlschange-2"><p><strong><img src="https://img.fsllala.top/TLS02.png" alt="nmap2"></strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div></li></ul><h3 id="ngnix版本号暴露"><a href="#ngnix版本号暴露" class="headerlink" title="ngnix版本号暴露"></a>ngnix版本号暴露</h3><p>修改nginx</p><figure class="highlight nginx"><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"><span class="section">http</span> &#123;</span><br><span class="line">    <span class="attribute">server_tokens</span> <span class="literal">off</span>;</span><br><span class="line">    <span class="comment"># 其他配置...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="iframe可以嵌套"><a href="#iframe可以嵌套" class="headerlink" title="iframe可以嵌套"></a>iframe可以嵌套</h3><blockquote><p>期望：通过iframe不能嵌套该网站；</p></blockquote><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="section">server</span> &#123;</span><br><span class="line">    <span class="attribute">listen</span> <span class="number">80</span>;</span><br><span class="line">    <span class="attribute">server_name</span> yourdomain.com;</span><br><span class="line"></span><br><span class="line">    <span class="section">location</span> / &#123;</span><br><span class="line">        <span class="attribute">add_header</span> X-Frame-Options <span class="string">&quot;DENY&quot;</span>; <span class="comment"># 加上介个</span></span><br><span class="line">        <span class="comment"># 其他服务器配置...</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
       
       
       <categories>
@@ -58,7 +58,7 @@
       <link href="/articles/5157567c.html"/>
       <url>/articles/5157567c.html</url>
       
-        <content type="html"><![CDATA[<h1 id="koa2项目实战"><a href="#koa2项目实战" class="headerlink" title="koa2项目实战"></a>koa2项目实战</h1><p>本文所有代码已上传：<a href="https://github.com/fsllala/koa2">github</a></p><h2 id="项目的搭建"><a href="#项目的搭建" class="headerlink" title="项目的搭建"></a>项目的搭建</h2><h3 id="目录结构的划分"><a href="#目录结构的划分" class="headerlink" title="目录结构的划分"></a>目录结构的划分</h3><ul><li>按照功能模块划分：例如：控制器(controller)的放在一起；操作数据库(service)的放在一起……</li><li>按照业务模块划分：一个完整的小功能放在一起；</li></ul><blockquote><p>本文将用<code>功能模块划分</code></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">-src</span><br><span class="line">    -main.<span class="property">js</span>  <span class="comment">//入口文件</span></span><br><span class="line">    -app <span class="comment">//全局文件夹</span></span><br><span class="line">    -controller <span class="comment">//所有的控制器</span></span><br><span class="line">    -service <span class="comment">//数据库操作相关</span></span><br><span class="line">    -router <span class="comment">//路由相关</span></span><br><span class="line">    -utils <span class="comment">//工具</span></span><br></pre></td></tr></table></figure><h4 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h4><figure class="highlight js"><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"><span class="comment">//在src目录下</span></span><br><span class="line">npm init -y</span><br><span class="line">npm i koa</span><br><span class="line">npm i nodemon -D    <span class="comment">//-D为开发依赖</span></span><br></pre></td></tr></table></figure><h4 id="设置快捷启动"><a href="#设置快捷启动" class="headerlink" title="设置快捷启动"></a>设置快捷启动</h4><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在package.json 配置</span></span><br><span class="line">  <span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;start&quot;</span>: <span class="string">&quot;nodemon ./src/main.js&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line"><span class="comment">// 之后可以直接通过 npm run start 方式启动项目,不需要找目录结构了</span></span><br></pre></td></tr></table></figure><h4 id="入口文件"><a href="#入口文件" class="headerlink" title="入口文件"></a>入口文件</h4><blockquote><p><code>main.js</code>键入如下代码：使用<code>nodemon main.js</code>即可启动服务；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;服务器启动成功~~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>但是入口文件中，代码越简洁越好，现在所有<code>app</code>的操作都在入口文件，不是很妥；</p></blockquote><h4 id="入口文件拆分"><a href="#入口文件拆分" class="headerlink" title="入口文件拆分"></a>入口文件拆分</h4><blockquote><p>在<code>app</code>文件中，新建<code>index.js</code>，用来放<code>app</code>的相关操作，然后在<strong>入口文件</strong>中，将其引入即可；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//app文件下的 index.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//入口文件 main.js</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="built_in">require</span>(<span class="string">&quot;./app/index.js&quot;</span>);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;服务器启动成功~~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h4 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h4><blockquote><p>端口号是直接在代码中写死的，不妥，需要<strong>抽离</strong>出来，写在<strong>配置文件</strong>中</p><p>在<strong>根目录</strong>（与<code>package.json</code>同级目录）下新建一个<code>.env</code>（environment）做<strong>配置文件</strong>用来存放所有抽离出来的<strong>环境变量</strong>，比如端口号；那么<strong>入口文件</strong>之如何读取到<code>.env</code>文件呢？</p></blockquote><ul><li><p>在<code>.env</code>配置文件中，写入<code>APP_PORT=3000</code></p></li><li><p>下载<code>dotenv</code>插件：</p><p><code>npm i dotenv</code></p><ul><li>因为<code>.env</code>文件是需要全局加载的，所以在<code>app</code>目录下新建<code>config.js</code>文件</li></ul></li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//  app/config.js</span></span><br><span class="line"><span class="keyword">const</span> dotenv = <span class="built_in">require</span>(<span class="string">&quot;dotenv&quot;</span>);</span><br><span class="line">dotenv.<span class="title function_">config</span>(); <span class="comment">//将.env中的变量挂载到process.env中</span></span><br><span class="line"><span class="comment">// console.log(process.env.APP_PORT);</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="variable constant_">APP_PORT</span></span><br><span class="line">&#125; = process.<span class="property">env</span>;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">const</span> app= <span class="built_in">require</span>(<span class="string">&quot;./app/index.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&quot;./app/config.js&quot;</span>);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(config.<span class="property">APP_PORT</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`server is running port is <span class="subst">$&#123;config.APP_PORT&#125;</span>`</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="用户注册接口"><a href="#用户注册接口" class="headerlink" title="用户注册接口"></a>用户注册接口</h2><blockquote><p>首先考虑： 请求路径与中间件处理的映射，但是<code>koa</code>不支持<code>app.post</code>等写法，只能用<code>app.use</code>，需要手动处理；所以只能借助路由第三方库<code>koa-router</code></p></blockquote><ul><li>下载路由第三方库：<code>npm i koa-router</code>；</li><li>查询数据需要获取到用户传递的参数，下载第三方库<code>npm i koa-bodyparser</code></li><li>使用<code>postman</code>进行测试；</li></ul><h3 id="架构基础写法"><a href="#架构基础写法" class="headerlink" title="架构基础写法"></a>架构基础写法</h3><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app文件下的 index.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line"></span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">ctx,next</span>)=&gt;</span>&#123;</span><br><span class="line">    ctx.<span class="property">body</span>=<span class="string">&quot;创建用户成功~&quot;</span>;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><blockquote><p>所有的路由相关的接口如果都写在 <code>app文件下的 index.js</code>里面的话，代码会显得很臃肿，而且也不容易进行后期维护；</p></blockquote><h3 id="架构进阶写法"><a href="#架构进阶写法" class="headerlink" title="架构进阶写法"></a>架构进阶写法</h3><h4 id="路由拆分"><a href="#路由拆分" class="headerlink" title="路由拆分"></a>路由拆分</h4><blockquote><p>在<code>router</code>文件夹下新建<code>user.router.js</code>，用来存储用户的路由信息；只负责注册接口，中间件处理逻辑不写在这里(见下文)；</p><p>将<code>router</code>路由抽离出去；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// router/user.router.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line"></span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">ctx,next</span>)=&gt;</span>&#123;</span><br><span class="line">    ctx.<span class="property">body</span>=<span class="string">&quot;创建用户成功~&quot;</span>;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app/index.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/user.router.js&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><blockquote><p>其实<strong>接口请求的中间件的逻辑</strong>(见下面代码)也是很多的，所以也需求抽取；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 接口请求的中间件的逻辑</span></span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">ctx,next</span>)=&gt;</span>&#123;</span><br><span class="line">    ctx.<span class="property">body</span>=<span class="string">&quot;创建用户成功~&quot;</span>;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//中的</span></span><br><span class="line">(ctx,next)=&gt;&#123;</span><br><span class="line">    ctx.<span class="property">body</span>=<span class="string">&quot;创建用户成功~&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//只负责注册接口,中间件处理逻辑不写在这里</span></span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,具体的处理逻辑);</span><br></pre></td></tr></table></figure><h4 id="路由中间件拆分"><a href="#路由中间件拆分" class="headerlink" title="路由中间件拆分"></a>路由中间件拆分</h4><blockquote><p>在<code>controller</code>文件夹新建<code>user.controller.js</code>，用来存放 中间件处理逻辑；</p><p>将路由中间件抽离出去；</p></blockquote><figure class="highlight js"><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">//  controller/user.controller.js</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserController</span>&#123;</span><br><span class="line">    <span class="comment">// 因为操作数据库是异步操作的,所以直接用 async 函数; async函数为对象的方法,下面直接module导出了一个对象;</span></span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx,next</span>)&#123;</span><br><span class="line">        <span class="comment">// 获取用户请求传递的参数</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">// 查询数据</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">// 返回数据</span></span><br><span class="line">        ctx.<span class="property">body</span>=<span class="string">&quot;controller success~&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>= <span class="keyword">new</span> <span class="title class_">UserController</span>(); <span class="comment">//导出的是一个对象(类的实例)</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// router/user.router.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="comment">// user.controller.js直接导出了一个实例对象,调用其方法;</span></span><br><span class="line"><span class="keyword">const</span> &#123;create&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/user.controller.js&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,create)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><blockquote><p>不难发现，即使抽离出来了中间件，<code>user.controller.js</code>异步方法里需要进行<strong>获取用户请求传递的参数，查询数据，返回数据</strong>的操作，依旧很繁琐；</p><p>故将<code>查询数据</code>的代码逻辑抽取出来，放到<code>service</code>的文件里；</p></blockquote><h4 id="路由中间件操作数据库拆分"><a href="#路由中间件操作数据库拆分" class="headerlink" title="路由中间件操作数据库拆分"></a>路由中间件操作数据库拆分</h4><blockquote><p>在<code>service</code>文件夹新建<code>user.service.js</code>，用来存放 查询数据 逻辑；</p><p>将操作数据库的逻辑抽离出去；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//  service/user.service.js</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">user</span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;user.controller传入的实参为&quot;</span>, user);</span><br><span class="line">        <span class="comment">// 将user存储到数据库中</span></span><br><span class="line">        <span class="keyword">return</span> <span class="string">&quot;service success&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// controller/user.controller.js</span></span><br><span class="line"><span class="keyword">const</span> service = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserController</span>&#123;</span><br><span class="line">    <span class="comment">// 因为操作数据库是异步操作的,所以直接用 async 函数; async函数为对象的方法,下面直接module导出了一个对象;</span></span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx,next</span>)&#123;</span><br><span class="line">        <span class="comment">// 获取用户请求传递的参数</span></span><br><span class="line">        <span class="keyword">const</span> user = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">        <span class="comment">// 查询数据</span></span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> service.<span class="title function_">create</span>(user);</span><br><span class="line">        <span class="comment">// 返回数据</span></span><br><span class="line">        ctx.<span class="property">body</span>= result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>= <span class="keyword">new</span> <span class="title class_">UserController</span>(); <span class="comment">//导出的是一个对象(类的实例)</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// router/user.router.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="comment">// user.controller.js直接导出了一个实例对象,调用其方法;</span></span><br><span class="line"><span class="keyword">const</span> &#123;create&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/user.controller.js&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,create)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/userSign11673224991635.png" alt="userSignin1"></p><blockquote><p>至此，架构已经大致划分完毕：一个接口划分了三层：<strong>router层、controller层、service层</strong>；</p></blockquote><h3 id="连接数据库"><a href="#连接数据库" class="headerlink" title="连接数据库"></a>连接数据库</h3><h4 id="安装依赖-1"><a href="#安装依赖-1" class="headerlink" title="安装依赖"></a>安装依赖</h4><ul><li>安装<code>mysql2</code>： <code>npm i mysql2</code>；</li></ul><h4 id="创建连接"><a href="#创建连接" class="headerlink" title="创建连接"></a>创建连接</h4><ul><li>创建<strong>连接池</strong>：<code>app</code>文件夹下新建<code>database.js</code>；</li></ul><blockquote><p>连接数据库的一些变量也属于<strong>配置文件</strong>，需要写到配置文件中；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// .env</span></span><br><span class="line"><span class="variable constant_">APP_PORT</span>=<span class="number">3000</span></span><br><span class="line"></span><br><span class="line"><span class="variable constant_">MYSQL_HOST</span>=localhost</span><br><span class="line"><span class="variable constant_">MYSQL_PORT</span>=<span class="number">3306</span></span><br><span class="line"><span class="variable constant_">MYSQL_DATABASE</span>=nodeHub</span><br><span class="line"><span class="variable constant_">MYSQL_USER</span>=root</span><br><span class="line"><span class="variable constant_">MYSQL_PASSWORD</span>=<span class="number">123456</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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">//  app/config.js</span></span><br><span class="line"><span class="keyword">const</span> dotenv = <span class="built_in">require</span>(<span class="string">&quot;dotenv&quot;</span>);</span><br><span class="line">dotenv.<span class="title function_">config</span>(); <span class="comment">//将.env中的变量挂载到process.env中</span></span><br><span class="line"><span class="comment">// console.log(process.env.APP_PORT);</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="variable constant_">APP_PORT</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_HOST</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_PORT</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_DATABASE</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_USER</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_PASSWORD</span>,</span><br><span class="line"></span><br><span class="line">&#125; = process.<span class="property">env</span>;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app/database.js</span></span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&quot;mysql2&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&quot;./config.js&quot;</span>);</span><br><span class="line"><span class="comment">// 1.创建连接池</span></span><br><span class="line"><span class="keyword">const</span> connectionPool = mysql.<span class="title function_">createPool</span>(&#123;</span><br><span class="line">  <span class="attr">host</span>: config.<span class="property">MYSQL_HOST</span>,</span><br><span class="line">  <span class="attr">port</span>: config.<span class="property">MYSQL_PORT</span>,</span><br><span class="line">  <span class="attr">database</span>: config.<span class="property">MYSQL_DATABASE</span>,</span><br><span class="line">  <span class="attr">user</span>: config.<span class="property">MYSQL_USER</span>,</span><br><span class="line">  <span class="attr">password</span>: config.<span class="property">MYSQL_PASSWORD</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断是否连接成功</span></span><br><span class="line">connectionPool.<span class="title function_">getConnection</span>(<span class="function">(<span class="params">err, connection</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (err) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;获取连接失败&quot;</span>, err);</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  connection.<span class="title function_">connect</span>(<span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (err) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;数据库交互失败&quot;</span> + err);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;数据库连接成功！&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// connections有promise()方法,可以直接调用;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = connectionPool.<span class="title function_">promise</span>();</span><br></pre></td></tr></table></figure><h4 id="插入数据"><a href="#插入数据" class="headerlink" title="插入数据"></a>插入数据</h4><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//  service/user.service.js</span></span><br><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">user</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> &#123;name,password&#125; = user;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`INSERT INTO users(name,password) VALUES(?,?)`</span>;</span><br><span class="line">        <span class="comment">// database.js 导出的是connections.promise();</span></span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[name,password]);</span><br><span class="line">        <span class="comment">// 将user存储到数据库中</span></span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// controller/user.controller.js</span></span><br><span class="line"><span class="keyword">const</span> service = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserController</span>&#123;</span><br><span class="line">    <span class="comment">// 因为操作数据库是异步操作的,所以直接用 async 函数; async函数为对象的方法,下面直接module导出了一个对象;</span></span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx,next</span>)&#123;</span><br><span class="line">        <span class="comment">// 获取用户请求传递的参数</span></span><br><span class="line">        <span class="keyword">const</span> user = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">        <span class="comment">// 查询数据</span></span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> service.<span class="title function_">create</span>(user);</span><br><span class="line">        <span class="comment">// 返回数据</span></span><br><span class="line">        ctx.<span class="property">body</span>= result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>= <span class="keyword">new</span> <span class="title class_">UserController</span>(); <span class="comment">//导出的是一个对象(类的实例)</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/userSign21673225049264.png" alt="userSign2"></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/database11673225109224.png" alt="database1"></p><blockquote><p>以上代码基本实现了用户注册的逻辑，但是如果用户没有传参，或者传入的参数不对，没有做处理；即没有做错误处理；</p></blockquote><h4 id="错误处理"><a href="#错误处理" class="headerlink" title="错误处理"></a>错误处理</h4><blockquote><p>那错误处理要写在什么地方呢？答案是以中间件的形式写在路由router中，并且在插入数据库中间件之前；</p><p>PS：Koa的router路由可以连续注册中间件,验证的中间件写在操作数据库的中间件之前就可以了；</p></blockquote><ul><li>在根目录(<code>package.json</code>同级)下新建<code>middleware</code>文件夹，用来存放中间件；</li><li>在<code>middleware</code>文件夹下新建<code>user.middleware.js</code>用来存放验证用户的中间件函数；</li><li>中间件为一个个单独的函数，比类使用起来会更灵活一点；所以这里不使用类；</li></ul><figure class="highlight js"><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">//  middleware/user.middleware.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">verifyUser</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * next之后才会匹配下一个符合条件的中间件；</span></span><br><span class="line"><span class="comment">     * koa的next返回的是个promise;</span></span><br><span class="line"><span class="comment">     * 因为下个中间件有异步操作,所以这里需要加await;</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    verifyUser</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// router/user.router.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="comment">// user.controller.js直接导出了一个实例对象,调用其方法;</span></span><br><span class="line"><span class="keyword">const</span> &#123;create&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/user.controller.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 中间件</span></span><br><span class="line"><span class="keyword">const</span> &#123;verifyUser&#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/user.middleware.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,verifyUser,create);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><ul><li><code>middleware/user.middleware.js</code>添加逻辑处理</li></ul><blockquote><p>在<code>middleware/user.middleware.js</code>中将错误弹出去；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// middleware/user.middleware.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">verifyUser</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 获取用户名密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 判断用户名密码不能为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&quot;用户名或密码不能为空&quot;</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 查看用户是否已经注册(未写)    </span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    verifyUser</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>在<code>app/index.js</code>监听错误</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/user.router.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorHandler = <span class="built_in">require</span>(<span class="string">&quot;./errorHandler.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听错误</span></span><br><span class="line">app.<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>,errorHandler);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><blockquote><p>在<code>app</code>文件夹下新建了一个<code>errorHandler.js</code>来做错误处理；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">errorHandler</span> = (<span class="params">error,ctx</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">//通过 message接收传过来的错误</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(error.<span class="property">message</span>);</span><br><span class="line"></span><br><span class="line">    ctx.<span class="property">status</span> = <span class="number">404</span>;</span><br><span class="line">    ctx.<span class="property">body</span> = <span class="string">&quot;发生了错误&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = errorHandler;</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/userSign31673225167528.png" alt="userSign3"></p><blockquote><p>但是错误提示语句有很多，最好<code>new Error(xx)</code>里放的是变量，到时候改一个就好了；</p></blockquote><ul><li>在根目录(<code>packagejson</code>同级目录)下新建<code>constants</code>文件夹，里面在新建<code>error-types.js</code>用来存放错误常量；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// constants/error-types.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span> = <span class="string">&quot;name_or_password_is_required&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// middleware/user.middleware.js</span></span><br><span class="line"><span class="keyword">const</span> &#123;<span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>&#125; = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">verifyUser</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 获取用户名密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 判断用户名密码不能为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 查看用户是否已经注册(未写)</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    verifyUser</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app/errorHandler.js</span></span><br><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">errorHandler</span> = (<span class="params">error, ctx</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// console.log(error.message);</span></span><br><span class="line">    <span class="keyword">let</span> status, message;</span><br><span class="line">    <span class="keyword">switch</span> (error.<span class="property">message</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>:</span><br><span class="line">            status = <span class="number">400</span>; <span class="comment">//Bad Request</span></span><br><span class="line">            message = <span class="string">&quot;用户名或密码不能为空&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            status = <span class="number">404</span>;</span><br><span class="line">            message = <span class="string">&quot;发生错误了~&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    ctx.<span class="property">status</span> = status;</span><br><span class="line">    ctx.<span class="property">body</span> = message;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = errorHandler;</span><br></pre></td></tr></table></figure><blockquote><p>查看用户是否已经注册的逻辑还没写，即查看用户是否存在；需要查询数据库；</p></blockquote><h4 id="查看用户是否已经注册"><a href="#查看用户是否已经注册" class="headerlink" title="查看用户是否已经注册"></a>查看用户是否已经注册</h4><blockquote><p><code>service/user.service</code>查看数据库</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// service/user.service</span></span><br><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">user</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> &#123;name,password&#125; = user;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`INSERT INTO users(name,password) VALUES(?,?)`</span>;</span><br><span class="line">        <span class="comment">// database.js 导出的是connections.promise();</span></span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[name,password]);</span><br><span class="line">        <span class="comment">// 将user存储到数据库中</span></span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">getUserByName</span>(<span class="params">name</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`SELECT * FROM users WHERE name=?`</span>;</span><br><span class="line">        <span class="comment">// database.js 导出的是connections.promise();</span></span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[name]);</span><br><span class="line">        <span class="keyword">return</span> result[<span class="number">0</span>];  <span class="comment">//返回result的话,又有很多其他信息,只有0才是我们想要的</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><blockquote><p><code>middleware/user.middleware</code>下调用查看数据库的方法；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// middleware/user.middleware</span></span><br><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;getUserByName&#125; = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">verifyUser</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 获取用户名密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 判断用户名密码不能为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 判断用户不能重复</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title function_">getUserByName</span>(name);</span><br><span class="line">    <span class="comment">// console.log(result); </span></span><br><span class="line">    <span class="keyword">if</span>(result.<span class="property">length</span>&gt;<span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">USER_IS_EXIT</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    verifyUser</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p><code>constants/error-types</code>下新添加错误变量</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// constants/error-types</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span> = <span class="string">&quot;name_or_password_is_required&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_EXIT</span>=<span class="string">&quot;user_is_exit&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>,</span><br><span class="line">    <span class="variable constant_">USER_IS_EXIT</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p><code>app/errorHandler.js</code>对新添加的变量做 错误处理；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app/errorHandler.js</span></span><br><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">errorHandler</span> = (<span class="params">error, ctx</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// console.log(error.message);</span></span><br><span class="line">    <span class="keyword">let</span> status, message;</span><br><span class="line">    <span class="keyword">switch</span> (error.<span class="property">message</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>:</span><br><span class="line">            status = <span class="number">400</span>; <span class="comment">//Bad Request</span></span><br><span class="line">            message = <span class="string">&quot;用户名或密码不能为空&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">USER_IS_EXIT</span>:</span><br><span class="line">            status = <span class="number">409</span>; <span class="comment">//conflict</span></span><br><span class="line">            message = <span class="string">&quot;用户名已存在~&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            status = <span class="number">404</span>;</span><br><span class="line">            message = <span class="string">&quot;发生错误了~&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    ctx.<span class="property">status</span> = status;</span><br><span class="line">    ctx.<span class="property">body</span> = message;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = errorHandler;</span><br></pre></td></tr></table></figure><blockquote><p>此时，数据库保存的密码是明文的，不安全，需要进行加密处理，这里采用中间件进行密码的加密；</p></blockquote><h4 id="密码加密"><a href="#密码加密" class="headerlink" title="密码加密"></a>密码加密</h4><blockquote><p>新建一个中间件，在 验证用户是否注册 和 插入 之间进行密码的加密；</p></blockquote><ul><li><code>nodejs</code>中自带了 <code>ctypto</code>库，使用这个进行加密，但是加密的方法还需要我们自己写，不是直接调；在<code>utils</code>文件夹新建<code>password-handle</code>封装加密方法；</li></ul><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// nodejs中自带了 ctypto库，使用这个进行加密</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> crypto = <span class="built_in">require</span>(<span class="string">&quot;crypto&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">md5Password</span> = (<span class="params">password</span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">// crypto.createHash(&#x27;加密方式&#x27;)</span></span><br><span class="line">  <span class="keyword">const</span> md5 = crypto.<span class="title function_">createHash</span>(<span class="string">&quot;md5&quot;</span>); <span class="comment">//返回是是一个对象</span></span><br><span class="line">  <span class="comment">// md5.update(加密的数据).digest()==&gt;获取二进制加密的Buffer</span></span><br><span class="line">  <span class="comment">// 进postman测试,md5.update(加密的数据)这个数据必须是string,不能为number;</span></span><br><span class="line">  </span><br><span class="line">  <span class="keyword">const</span> result = md5.<span class="title function_">update</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(password)).<span class="title function_">digest</span>(<span class="string">&quot;hex&quot;</span>); <span class="comment">//获取16进制加密的字符串</span></span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = md5Password;</span><br></pre></td></tr></table></figure><ul><li>在<code>middleware</code>的<code>user.middleware</code>下封装一个处理密码加密的中间件；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;getUserByName&#125; = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> md5Password = <span class="built_in">require</span>(<span class="string">&quot;../utils/password-handle.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">verifyUser</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 获取用户名密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 判断用户名密码不能为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 判断用户不能重复</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title function_">getUserByName</span>(name);</span><br><span class="line">    <span class="comment">// console.log(result); </span></span><br><span class="line">    <span class="keyword">if</span>(result.<span class="property">length</span>&gt;<span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">USER_IS_EXIT</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 密码加密</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">handlePassword</span> = <span class="keyword">async</span> (<span class="params">ctx,next</span>)=&gt;&#123;</span><br><span class="line">    <span class="keyword">let</span> &#123;password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>; <span class="comment">//获取到未加密的</span></span><br><span class="line">    ctx.<span class="property">request</span>.<span class="property">body</span>.<span class="property">password</span>= <span class="title function_">md5Password</span>(password); <span class="comment">//将ctx.body上的密码进行加密,然后插入到数据库</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    verifyUser,</span><br><span class="line">    handlePassword,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>在<code>router</code>下的<code>user.router.js</code>中进行密码加密中间件的导入与使用；、</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="comment">// user.controller.js直接导出了一个实例对象,调用其方法;</span></span><br><span class="line"><span class="keyword">const</span> &#123;create&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/user.controller.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 中间件</span></span><br><span class="line"><span class="keyword">const</span> &#123;verifyUser,handlePassword&#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/user.middleware.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,verifyUser,handlePassword,create);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><blockquote><p>注！！！这里在<code>postman</code>测试的时候,密码为数字的时候，会报错。可能是<code>postman</code>的原因，key和value都需要双引号包裹；</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/userSing41673225214071.png" alt="userSing4"></p><h2 id="用户登录接口"><a href="#用户登录接口" class="headerlink" title="用户登录接口"></a>用户登录接口</h2><blockquote><p>写接口的思想是：一开始没有任何限制，然后一点点的往里面添加中间件，来进行限制。这样才好写，而不是一下子就能想那么多；</p></blockquote><h3 id="登录逻辑结构搭建"><a href="#登录逻辑结构搭建" class="headerlink" title="登录逻辑结构搭建"></a>登录逻辑结构搭建</h3><ul><li><code>router</code>文件夹下新建<code>auth.router.js</code>，用来存放登录的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;login&#125; =<span class="built_in">require</span>(<span class="string">&quot;../controller/auth.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/login&quot;</span>&#125;);</span><br><span class="line">authRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,login);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=authRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下新建<code>auth.controller.js</code>，用来存放中间件的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">AuthController</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">login</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> &#123;name&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">        ctx.<span class="property">body</span> = <span class="string">`欢迎<span class="subst">$&#123;name&#125;</span>回来~`</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">AuthController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>app</code>文件夹下的<code>index.js</code>中，将路由进行引入与注册；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/user.router.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/auth.router.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorHandler = <span class="built_in">require</span>(<span class="string">&quot;./errorHandler.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(authRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(authRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听错误</span></span><br><span class="line">app.<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>,errorHandler);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><ul><li><code>postman</code>进行测试</li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/userLogin11673225250527.png" alt="userLogin1"></p><blockquote><p>壳子套好了，但是现在是个用户就能登录。需要添加登录条件，登录的时候判断用户是否存在，判断用户和密码输入的是否正确。。。</p></blockquote><h3 id="登录条件"><a href="#登录条件" class="headerlink" title="登录条件"></a>登录条件</h3><blockquote><p>通过中间件的方式来写入限制条件</p></blockquote><ul><li>在<code>middleware</code>下新建<code>auth.middleware.js</code>，用来做登录的限制；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;getUserByName&#125; = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> md5Password = <span class="built_in">require</span>(<span class="string">&quot;../utils/password-handle.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">vertifyLogin</span> = <span class="keyword">async</span>(<span class="params">ctx,next</span>)=&gt;&#123;</span><br><span class="line">    <span class="comment">// 1.获取用户名和密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 2.判断用户名或密码是否为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 3.判断用户名是否存在</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title function_">getUserByName</span>(name);</span><br><span class="line">    <span class="keyword">let</span> user = result[<span class="number">0</span>];</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(user);</span><br><span class="line">    <span class="keyword">if</span>(!user)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">USER_IS_NOT_EXIT</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 4.验证密码是否和数据库中的密码一致(加密)</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="title function_">md5Password</span>(password)!==user.<span class="property">password</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">PASSWORD_IS_INCORRENT</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    vertifyLogin,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><code>router</code>的<code>auth.router.js</code>引入中间件；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;login&#125; =<span class="built_in">require</span>(<span class="string">&quot;../controller/auth.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;vertifyLogin&#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/login&quot;</span>&#125;);</span><br><span class="line">authRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,vertifyLogin,login);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=authRouter;</span><br></pre></td></tr></table></figure><ul><li>中间件错误变量，放在在错误变量<code>constants</code>文件夹下的<code>error-types.js</code>里；(<code>app/index.js</code>监听错误处理，这里登录接口写了，不需要更改)；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span> = <span class="string">&quot;name_or_password_is_required&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_EXIT</span>=<span class="string">&quot;user_is_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_NOT_EXIT</span>=<span class="string">&quot;user_is_not_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PASSWORD_IS_INCORRENT</span>=<span class="string">&quot;password_id_incorrent&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>,</span><br><span class="line">    <span class="variable constant_">USER_IS_EXIT</span>,</span><br><span class="line">    <span class="variable constant_">USER_IS_NOT_EXIT</span>,</span><br><span class="line">    <span class="variable constant_">PASSWORD_IS_INCORRENT</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><code>app</code>文件夹下的<code>errorHandler.js</code>下做变量的错误处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">errorHandler</span> = (<span class="params">error, ctx</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// console.log(error.message);</span></span><br><span class="line">    <span class="keyword">let</span> status, message;</span><br><span class="line">    <span class="keyword">switch</span> (error.<span class="property">message</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>:</span><br><span class="line">            status = <span class="number">400</span>; <span class="comment">//Bad Request</span></span><br><span class="line">            message = <span class="string">&quot;用户名或密码不能为空&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">USER_IS_EXIT</span>:</span><br><span class="line">            status = <span class="number">409</span>; <span class="comment">//conflict</span></span><br><span class="line">            message = <span class="string">&quot;用户名已存在~&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">USER_IS_NOT_EXIT</span>:</span><br><span class="line">            status = <span class="number">400</span>; <span class="comment">//请求参数错误</span></span><br><span class="line">            message = <span class="string">&quot;用户不存在&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">PASSWORD_IS_INCORRENT</span>:</span><br><span class="line">            status = <span class="number">400</span>; <span class="comment">//请求参数错误</span></span><br><span class="line">            message = <span class="string">&quot;用户名或密码错误&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            status = <span class="number">404</span>;</span><br><span class="line">            message = <span class="string">&quot;发生错误了~&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    ctx.<span class="property">status</span> = status;</span><br><span class="line">    ctx.<span class="property">body</span> = message;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = errorHandler;</span><br></pre></td></tr></table></figure><ul><li><code>postman</code>进行测试~</li></ul><h3 id="简化路由注册"><a href="#简化路由注册" class="headerlink" title="简化路由注册"></a>简化路由注册</h3><blockquote><p>现在注册了两个路由，<code>app/index.js</code>代码为：</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/user.router.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/auth.router.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorHandler = <span class="built_in">require</span>(<span class="string">&quot;./errorHandler.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(authRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(authRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听错误</span></span><br><span class="line">app.<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>,errorHandler);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><ul><li>在<code>router</code>文件夹下新建<code>index.js</code>；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">useRoutes</span> = (<span class="params">app</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// fs.readdirSync返回的是个数组;</span></span><br><span class="line">    fs.<span class="title function_">readdirSync</span>(__dirname).<span class="title function_">forEach</span>(<span class="function"><span class="params">file</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (file == <span class="string">&quot;index.js&quot;</span>) <span class="keyword">return</span>;</span><br><span class="line">        <span class="keyword">const</span> router = <span class="built_in">require</span>(<span class="string">`./<span class="subst">$&#123;file&#125;</span>`</span>);</span><br><span class="line">        app.<span class="title function_">use</span>(router.<span class="title function_">routes</span>());</span><br><span class="line">        app.<span class="title function_">use</span>(router.<span class="title function_">allowedMethods</span>());</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=useRoutes;</span><br></pre></td></tr></table></figure><ul><li>在<code>app</code>文件夹下<code>index.js</code>中进行引入；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="comment">// const userRouter = require(&quot;../router/user.router.js&quot;);</span></span><br><span class="line"><span class="comment">// const authRouter = require(&quot;../router/auth.router.js&quot;);</span></span><br><span class="line"><span class="keyword">const</span> useRoutes = <span class="built_in">require</span>(<span class="string">&quot;../router/index.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorHandler = <span class="built_in">require</span>(<span class="string">&quot;./errorHandler.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line"><span class="title function_">useRoutes</span>(app); <span class="comment">//传参app参数</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听错误</span></span><br><span class="line">app.<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>,errorHandler);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><h3 id="登录凭证"><a href="#登录凭证" class="headerlink" title="登录凭证"></a>登录凭证</h3><blockquote><p>登录成功返回凭证：<code>cookie+session</code>或者是<code>Token令牌</code>；现在基本都是<code>Token令牌</code>作为登录凭证；</p></blockquote><h4 id="为什么需要登录凭证呢？"><a href="#为什么需要登录凭证呢？" class="headerlink" title="为什么需要登录凭证呢？"></a>为什么需要登录凭证呢？</h4><blockquote><p>web开发中，我们使用最多的协议是<code>http</code>，但是<code>http</code>是一个<strong>无状态</strong>的协议。那什么叫做无状态协议呢？</p></blockquote><ul><li>举个例子：<ul><li>我们登录了一个网站 <a href="http://www.fsllala.top;/">www.fsllala.top；</a></li><li>登录的时候我们需要输入用户名和密码：比如用户名<code>forward</code>，密码：<code>Forward666</code>;</li><li>登录成功之后，我们要以<code>forward</code>的身份去访问其他的数据和资源，还是通过<code>http</code>请求去访问。<ul><li>fsllala的服务器会问：你谁呀？</li><li>forward说：我是forward呀，刚刚登录过呀；</li><li>fsllala：怎么证明你刚刚登录过呀？</li><li>forward说：这。。。，http没有告诉你吗？</li><li>fsllala：http的每次请求对我来说都是一个单独的请求，和之前请求过什么没有关系。</li></ul></li></ul></li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224477117cookie.png"></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224528691cookie.png"></p><blockquote><p>看到了吧？这就是http的无状态，也就是服务器不知道你上一步做了什么，我们必须得有一个办法可以证明我们登录过；</p></blockquote><ul><li>那如何证明刚才就是我登录的啊？<ul><li>登陆成功的时候服务器给我们发过来一个<strong>登录凭证</strong>，访问其他资源的时候，通过这个<strong>登录凭证</strong>来证明刚才就是我登录的，而且我能访问哪些资源，不能访问哪些资源，都可以通过<strong>登录凭证</strong>来决定；</li></ul></li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224500212cookie.png"></p><ul><li>目前登录凭证有两种：<ul><li><code>cookie+session</code>(逐渐淘汰)</li><li><code>Token</code>令牌</li></ul></li></ul><p><strong>详细文章，参考 <a href="https://fsllala.top/articles/5fc41a6b">NodeJs 登录凭证</a></strong></p><h3 id="JWT颁发签名"><a href="#JWT颁发签名" class="headerlink" title="JWT颁发签名"></a>JWT颁发签名</h3><ul><li>我们在<code>vertifyLogin</code>中间件中查询到了用户数据，我们需要将用户的<code>id</code>、<code>name</code>和<code>生成的token</code>返回给用户；所以可以在<code>vertifyLogin</code>中间件中，将用户的数据绑定在<code>ctx</code>中(类似于原型)；最后在<code>login</code>中间件即<code>controller</code>里面获取用户数据，进行<code>token生成</code>和数据的返回；</li><li>采用<code>非对称加密</code>，将生成的<code>私钥</code>和<code>公钥</code>放到<code>app</code>文件夹下(公共的数据)；</li></ul><ol><li><code>middleware</code>文件夹下，将从<code>数据库</code>中获取到的<code>user</code>绑定在<code>ctx</code>对象上,用于<code>controller</code>获取用户数据；</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">将user绑定在ctx对象上,用于controller获取用户数据</span><br><span class="line">ctx.<span class="property">user</span>=user;</span><br></pre></td></tr></table></figure><blockquote><p><code>middleware/auth.middleware.js</code>完整代码：</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;getUserByName&#125; = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> md5Password = <span class="built_in">require</span>(<span class="string">&quot;../utils/password-handle.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">vertifyLogin</span> = <span class="keyword">async</span>(<span class="params">ctx,next</span>)=&gt;&#123;</span><br><span class="line">    <span class="comment">// 1.获取用户名和密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 2.判断用户名或密码是否为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 3.判断用户名是否存在</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title function_">getUserByName</span>(name);</span><br><span class="line">    <span class="keyword">let</span> user = result[<span class="number">0</span>];</span><br><span class="line">    <span class="comment">// console.log(user);</span></span><br><span class="line">    <span class="keyword">if</span>(!user)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">USER_IS_NOT_EXIT</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 4.验证密码是否和数据库中的密码一致(加密)</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="title function_">md5Password</span>(password)!==user.<span class="property">password</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">PASSWORD_IS_INCORRENT</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 5.将user绑定在ctx对象上,用于controller获取用户数据</span></span><br><span class="line">    ctx.<span class="property">user</span>=user;</span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    vertifyLogin,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li><code>app</code>下的<code>config.js</code>读取<code>key</code>并导出；</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> dotenv = <span class="built_in">require</span>(<span class="string">&quot;dotenv&quot;</span>);</span><br><span class="line">dotenv.<span class="title function_">config</span>(); <span class="comment">//将.env中的变量挂载到process.env中</span></span><br><span class="line"><span class="comment">// console.log(process.env.APP_PORT);</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PRIVATE_KEY</span> = fs.<span class="title function_">readFileSync</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;./keys/private.key&quot;</span>));</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PUBLIC_KEY</span> = fs.<span class="title function_">readFileSync</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;./keys/public.key&quot;</span>));</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="variable constant_">APP_PORT</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_HOST</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_PORT</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_DATABASE</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_USER</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_PASSWORD</span>,</span><br><span class="line"></span><br><span class="line">&#125; = process.<span class="property">env</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里不能写在module.exports上面,原因可参考模块化规范一文；</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">PRIVATE_KEY</span> = <span class="variable constant_">PRIVATE_KEY</span>;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">PUBLIC_KEY</span> = <span class="variable constant_">PUBLIC_KEY</span>;</span><br></pre></td></tr></table></figure><ol start="3"><li>安装<code>jsonwebtoken</code></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i jsonwebtoken</span><br></pre></td></tr></table></figure><ol start="4"><li>在<code>controller</code>下的<code>auth.controller.js</code>中做<code>token</code>的返回；</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;<span class="variable constant_">PRIVATE_KEY</span>&#125; = <span class="built_in">require</span>(<span class="string">&quot;../app/config.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">AuthController</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">login</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">        <span class="comment">// const &#123;name&#125; = ctx.request.body;</span></span><br><span class="line">        <span class="comment">// ctx.body = `欢迎$&#123;name&#125;回来~`;</span></span><br><span class="line">        <span class="keyword">const</span> &#123;id,name&#125;=ctx.<span class="property">user</span>;</span><br><span class="line">        <span class="keyword">const</span> token = jwt.<span class="title function_">sign</span>(&#123;id,name&#125;,<span class="variable constant_">PRIVATE_KEY</span>,&#123;</span><br><span class="line">            <span class="attr">expiresIn</span>:<span class="number">60</span>*<span class="number">60</span>*<span class="number">24</span>,</span><br><span class="line">            <span class="attr">algorithm</span>:<span class="string">&quot;RS256&quot;</span></span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="comment">//返回对象形式的数据(ES6简写)</span></span><br><span class="line">        ctx.<span class="property">body</span>=&#123;</span><br><span class="line">            id,</span><br><span class="line">            name,</span><br><span class="line">            token</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">AuthController</span>();</span><br></pre></td></tr></table></figure><ol start="5"><li>使用<code>postman</code>进行测试；(填入数据库存在的用户)；</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/token81673958231583.png"></p><ol start="6"><li>设计个简单的接口，验证上面写的登录接口；（这一步实际项目不用做，做的话看下一步骤7）</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在controller下的auth.controller.js下</span></span><br><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; <span class="variable constant_">PRIVATE_KEY</span>, <span class="variable constant_">PUBLIC_KEY</span> &#125; = <span class="built_in">require</span>(<span class="string">&quot;../app/config.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">AuthController</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">login</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 验证token</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">vertifyToken</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> authorization = ctx.<span class="property">headers</span>.<span class="property">authorization</span>;</span><br><span class="line">    <span class="comment">// 此时的token多一个&quot;Bearer &quot;,去掉;</span></span><br><span class="line">    <span class="keyword">const</span> token = authorization.<span class="title function_">replace</span>(<span class="string">&quot;Bearer &quot;</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">    <span class="comment">// 认证token 通过 jwt.verify(token,key); 使用公钥进行解密,并告诉其加密算法;</span></span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> result = jwt.<span class="title function_">verify</span>(token, <span class="variable constant_">PUBLIC_KEY</span>, &#123;</span><br><span class="line">        <span class="attr">algorithms</span>: [<span class="string">&quot;RS256&quot;</span>], <span class="comment">//这里algorithms是个复数,所以需要传入数组;</span></span><br><span class="line">      &#125;);</span><br><span class="line">      ctx.<span class="property">body</span> = result;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">      <span class="keyword">const</span> tokenError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">UNAUTHORIZATION</span>);</span><br><span class="line">      <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>, tokenError, ctx);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">AuthController</span>();</span><br></pre></td></tr></table></figure><figure class="highlight js"><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">// 在constants下的error-types.js下</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span> = <span class="string">&quot;name_or_password_is_required&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_EXIT</span> = <span class="string">&quot;user_is_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_NOT_EXIT</span> = <span class="string">&quot;user_is_not_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PASSWORD_IS_INCORRENT</span> = <span class="string">&quot;password_is_incorrent&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">UNAUTHORIZATION</span> = <span class="string">&quot;unauthorization&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>,</span><br><span class="line">  <span class="variable constant_">USER_IS_EXIT</span>,</span><br><span class="line">  <span class="variable constant_">USER_IS_NOT_EXIT</span>,</span><br><span class="line">  <span class="variable constant_">PASSWORD_IS_INCORRENT</span>,</span><br><span class="line">  <span class="variable constant_">UNAUTHORIZATION</span>,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在app下的errorHandler.js下</span></span><br><span class="line">  <span class="keyword">case</span> errorType.<span class="property">UNAUTHORIZATION</span>:</span><br><span class="line">    status = <span class="number">401</span>; </span><br><span class="line">    message = <span class="string">&quot;无效的token~&quot;</span>;</span><br><span class="line">    <span class="keyword">break</span>;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在router下的auth.router.js下</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyLogin &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; login,vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/auth.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/login&quot;</span> &#125;);</span><br><span class="line">authRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyLogin, login);</span><br><span class="line">authRouter.<span class="title function_">get</span>(<span class="string">&quot;/&quot;</span>, vertifyToken);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = authRouter;</span><br></pre></td></tr></table></figure><p>使用postman，填入token，进行测试<code>&#123;&#123;baseUrl&#125;&#125;/login</code>；</p><ol start="7"><li>实际项目中，几乎每个接口都需要验证token，所以需要将6中的验证token的逻辑提取到中间件中；以后别的接口需要验证token的话，直接引入这个验证token的中间件就行。</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在middleware的auth.middleware.js下</span></span><br><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; getUserByName &#125; = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> md5Password = <span class="built_in">require</span>(<span class="string">&quot;../utils/password-handle.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; <span class="variable constant_">PUBLIC_KEY</span> &#125; = <span class="built_in">require</span>(<span class="string">&quot;../app/config.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">vertifyLogin</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 验证token是否有效</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">vertifyToken</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> authorization = ctx.<span class="property">headers</span>.<span class="property">authorization</span>;</span><br><span class="line">  <span class="comment">// 验证是否携带TOKEN</span></span><br><span class="line">  <span class="keyword">if</span>(!authorization)&#123;</span><br><span class="line">    <span class="keyword">const</span> tokenError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">UNAUTHORIZATION</span>);</span><br><span class="line">    <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>, tokenError, ctx);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 此时的token多一个&quot;Bearer &quot;,去掉;</span></span><br><span class="line">  <span class="keyword">const</span> token = authorization.<span class="title function_">replace</span>(<span class="string">&quot;Bearer &quot;</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">  <span class="comment">// 认证token 通过 jwt.verify(token,key); 使用公钥进行解密,并告诉其加密算法;</span></span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="comment">// 获取到token中信息(id.name...)</span></span><br><span class="line">    <span class="keyword">const</span> result = jwt.<span class="title function_">verify</span>(token, <span class="variable constant_">PUBLIC_KEY</span>, &#123;</span><br><span class="line">      <span class="attr">algorithms</span>: [<span class="string">&quot;RS256&quot;</span>], <span class="comment">//这里algorithms是个复数,所以需要传入数组;</span></span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="comment">// 将token信息保留下来,以便后续使用</span></span><br><span class="line">    ctx.<span class="property">userInfo</span> = result;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 执行下一个中间件;</span></span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">  &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">    <span class="keyword">const</span> tokenError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">UNAUTHORIZATION</span>);</span><br><span class="line">    <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>, tokenError, ctx);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  vertifyLogin,</span><br><span class="line">  vertifyToken</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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">// 在constants下的error-types.js下</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span> = <span class="string">&quot;name_or_password_is_required&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_EXIT</span> = <span class="string">&quot;user_is_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_NOT_EXIT</span> = <span class="string">&quot;user_is_not_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PASSWORD_IS_INCORRENT</span> = <span class="string">&quot;password_is_incorrent&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">UNAUTHORIZATION</span> = <span class="string">&quot;unauthorization&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>,</span><br><span class="line">  <span class="variable constant_">USER_IS_EXIT</span>,</span><br><span class="line">  <span class="variable constant_">USER_IS_NOT_EXIT</span>,</span><br><span class="line">  <span class="variable constant_">PASSWORD_IS_INCORRENT</span>,</span><br><span class="line">  <span class="variable constant_">UNAUTHORIZATION</span>,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在app下的errorHandler.js下</span></span><br><span class="line">  <span class="keyword">case</span> errorType.<span class="property">UNAUTHORIZATION</span>:</span><br><span class="line">    status = <span class="number">401</span>; </span><br><span class="line">    message = <span class="string">&quot;无效的token~&quot;</span>;</span><br><span class="line">    <span class="keyword">break</span>;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在router下的auth.router.js下</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyLogin,vertifyToken&#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; login &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/auth.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/login&quot;</span> &#125;);</span><br><span class="line">authRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyLogin, login);</span><br><span class="line">authRouter.<span class="title function_">get</span>(<span class="string">&quot;/&quot;</span>, vertifyToken);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = authRouter;</span><br></pre></td></tr></table></figure><p>使用postman，填入token，进行测试<code>&#123;&#123;baseUrl&#125;&#125;/login</code>；</p><h2 id="动态信息接口-一对多"><a href="#动态信息接口-一对多" class="headerlink" title="动态信息接口(一对多)"></a>动态信息接口(一对多)</h2><blockquote><p>设计表字段思路：谁，发表了什么动态信息；</p><p>一条动态(含唯一id)，只能是一个用户发布的；一个用户，可以发表多条动态信息(含唯一id)；</p><p>属于”一对多”关系型数据库表；</p></blockquote><h3 id="数据库表"><a href="#数据库表" class="headerlink" title="数据库表"></a>数据库表</h3><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `moment`(</span><br><span class="line"> id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line"> content <span class="type">VARCHAR</span>(<span class="number">1000</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"> user_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"> ctrateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> updateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span> <span class="keyword">ON</span> <span class="keyword">UPDATE</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> <span class="keyword">FOREIGN</span> KEY(user_id) <span class="keyword">REFERENCES</span> <span class="keyword">user</span>(id)</span><br><span class="line">)</span><br></pre></td></tr></table></figure><h3 id="发表动态"><a href="#发表动态" class="headerlink" title="发表动态"></a>发表动态</h3><ul><li><code>router</code>文件夹下新建<code>moment.router.js</code>，用来存放用户动态的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在简化路由注册中,实现了路由的自动引入;因此,不需要手动引入路由;</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; postUpdates &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/moment.controller&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> momentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/moment&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 发表动态(登录之后才能,引入验证token的中间件)</span></span><br><span class="line">momentRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyToken, postUpdates);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = momentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下新建<code>moment.controller.js</code>，用来存放中间件的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 啥逻辑也不写,进行简单的接口验证</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">MomentController</span> &#123;</span><br><span class="line">    <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">postUpdates</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    ctx.<span class="property">body</span>=<span class="string">&quot;发表动态成功~&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">MomentController</span>();</span><br></pre></td></tr></table></figure><figure class="highlight js"><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">// 进行逻辑的处理</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">MomentController</span> &#123;</span><br><span class="line">    <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">postUpdates</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 1.获取动态的内容;</span></span><br><span class="line">    <span class="keyword">const</span> &#123;content&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 2.动态是谁发布的(谁登录就是谁发布的,登录的时候再ctx上绑定了user属性);</span></span><br><span class="line">    <span class="keyword">const</span> &#123;id&#125; = ctx.<span class="property">user</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">MomentController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下新建<code>moment.service.js</code>，用来存放中间件的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 可能插入失败,需要修改数据表content字符集为 utf8;</span></span><br><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">contents,userId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO moment(content,user_id) VALUES(?,?)`</span>;</span><br><span class="line">    <span class="comment">// 返回的是一个[&#123;&#125;]格式的数据,lenth为1;采用数组结构,获取[]中的&#123;&#125;;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[contents,userId]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// moment.controller.js</span></span><br><span class="line"><span class="keyword">const</span> momentService = <span class="built_in">require</span>(<span class="string">&quot;../service/moment.service&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">MomentController</span> &#123;</span><br><span class="line">  <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">postUpdates</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 1.获取动态的内容;</span></span><br><span class="line">    <span class="keyword">const</span> &#123; content &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 2.动态是谁发布的(谁登录就是谁发布的,验证token的时候再ctx上绑定了userInfo属性);</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">create</span>(content, id);</span><br><span class="line">    <span class="comment">// 4.返回数据</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;发布动态成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">MomentController</span>();</span><br></pre></td></tr></table></figure><h3 id="查询动态列表"><a href="#查询动态列表" class="headerlink" title="查询动态列表"></a>查询动态列表</h3><blockquote><p>查询一般涉及到了分页的处理。</p></blockquote><ul><li><code>router</code>文件夹下的<code>moment.router.js</code>，新增查询用户动态的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; postUpdates,list &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/moment.controller&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> momentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/moment&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 发表动态(登录之后才能,引入验证token的中间件)</span></span><br><span class="line">momentRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyToken, postUpdates);</span><br><span class="line"><span class="comment">// 查询动态(这个不登录也能看动态的)</span></span><br><span class="line">momentRouter.<span class="title function_">get</span>(<span class="string">&quot;/list&quot;</span>, list);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = momentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>moment.controller.js</code>，新增查询中间件的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> momentService = <span class="built_in">require</span>(<span class="string">&quot;../service/moment.service&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">MomentController</span> &#123;</span><br><span class="line">  <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">postUpdates</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 1.获取动态的内容;</span></span><br><span class="line">    <span class="keyword">const</span> &#123; content &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 2.动态是谁发布的(谁登录就是谁发布的,验证token的时候再ctx上绑定了userInfo属性);</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">create</span>(content, id);</span><br><span class="line">    <span class="comment">// 4.返回数据</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;发布动态成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 查询动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">list</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 获取 size与offset</span></span><br><span class="line">    <span class="keyword">const</span> &#123; size,offset &#125; = ctx.<span class="property">query</span>;</span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">queryList</span>(size,offset);</span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;查询动态成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">MomentController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>moment.service.js</code>，新增查询中间件的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="comment">// 专门做数据库操作的;</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">contents,userId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO moment(content,user_id) VALUES(?,?)`</span>;</span><br><span class="line">    <span class="comment">// 返回的是一个[&#123;&#125;]格式的数据,lenth为1;采用数组结构,获取[]中的&#123;&#125;;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[contents,userId]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 查询数据列表</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">queryList</span>(<span class="params">size,offset</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`SELECT * FROM moment LIMIT ? OFFSET ?`</span>;</span><br><span class="line">    <span class="comment">// 这里如果写成String()的话,如果用户不传size,offset,接口也能通;如果是Number的话,会报错;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[<span class="title class_">String</span>(size),<span class="title class_">String</span>(offset)]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><blockquote><p>访问<code>moment/list?size=10&amp;offset=0</code>，进行动态列表数据的分页查询。</p></blockquote><p>但是现在返回的数据，其实仅仅是当前的<code>moment</code>数据表中的数据，不能知道是谁评论的，需要用外键<code>user_id</code>与<code>user</code>表关联起来；</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/koa_momentList1.png"></p><ul><li>多表查询</li></ul><figure class="highlight sql"><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"><span class="operator">/</span><span class="operator">/</span> 基础写法(没有数据格式处理,字段没有过滤)</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> moment </span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `<span class="keyword">user</span>` <span class="keyword">ON</span> user.id<span class="operator">=</span>moment.user_id</span><br><span class="line">LIMIT <span class="number">10</span> <span class="keyword">OFFSET</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="operator">/</span><span class="operator">/</span> 进阶</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">m.id <span class="keyword">as</span> id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span><br><span class="line"><span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,u.id,<span class="string">&#x27;name&#x27;</span>,u.name) <span class="keyword">as</span> userInfo</span><br><span class="line"><span class="keyword">FROM</span> moment <span class="keyword">as</span> m</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `<span class="keyword">user</span>` <span class="keyword">as</span> u <span class="keyword">ON</span> u.id<span class="operator">=</span>m.user_id</span><br><span class="line">LIMIT <span class="number">10</span> <span class="keyword">OFFSET</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/koa_momentList2.png"></p><ul><li><code>service</code>文件夹下的<code>moment.service.js</code>，修改查询SQL语句；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="comment">// 专门做数据库操作的;</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">contents,userId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO moment(content,user_id) VALUES(?,?)`</span>;</span><br><span class="line">    <span class="comment">// 返回的是一个[&#123;&#125;]格式的数据,lenth为1;采用数组结构,获取[]中的&#123;&#125;;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[contents,userId]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 查询数据列表</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">queryList</span>(<span class="params">size,offset</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`SELECT </span></span><br><span class="line"><span class="string">    m.id as id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span></span><br><span class="line"><span class="string">    JSON_OBJECT(&#x27;id&#x27;,u.id,&#x27;name&#x27;,u.name) as userInfo</span></span><br><span class="line"><span class="string">    FROM moment as m</span></span><br><span class="line"><span class="string">    LEFT JOIN user as u ON u.id=m.user_id</span></span><br><span class="line"><span class="string">    LIMIT ? OFFSET ?`</span>;</span><br><span class="line">    <span class="comment">// 这里如果写成String()的话,如果用户不传size,offset,接口也能通;如果是Number的话,会报错;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[<span class="title class_">String</span>(size),<span class="title class_">String</span>(offset)]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><blockquote><p>访问<code>moment/list?size=10&amp;offset=0</code>，进行动态列表数据的分页查询，查询结果如下图所示</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/koa_momentList3.png"></p><h3 id="查询动态详情"><a href="#查询动态详情" class="headerlink" title="查询动态详情"></a>查询动态详情</h3><blockquote><p>获取列表某一条数据的详情。</p></blockquote><ul><li><code>router</code>文件夹下的<code>moment.router.js</code>，新增查询用户动态详情接口；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; postUpdates,list,detail&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/moment.controller&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> momentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/moment&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 发表动态(登录之后才能,引入验证token的中间件)</span></span><br><span class="line">momentRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyToken, postUpdates);</span><br><span class="line"><span class="comment">// 查询动态(这个不登录也能看动态的)</span></span><br><span class="line">momentRouter.<span class="title function_">get</span>(<span class="string">&quot;/list&quot;</span>, list);</span><br><span class="line"><span class="comment">// 查询动态详情</span></span><br><span class="line">momentRouter.<span class="title function_">get</span>(<span class="string">&quot;/:momentId&quot;</span>, detail);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = momentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>moment.controller.js</code>，新增查询中间件的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 查询动态详情</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">detail</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; momentId &#125; = ctx.<span class="property">params</span>;</span><br><span class="line">  <span class="comment">// console.log(momentId);</span></span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">queryDetailById</span>(momentId);</span><br><span class="line">  ctx.<span class="property">body</span> = &#123;</span><br><span class="line">    <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&quot;查询动态详情成功&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: result,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>moment.service.js</code>，新增查询中间件的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="comment">// 专门做数据库操作的;</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">contents,userId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO moment(content,user_id) VALUES(?,?)`</span>;</span><br><span class="line">    <span class="comment">// 返回的是一个[&#123;&#125;]格式的数据,lenth为1;采用数组结构,获取[]中的&#123;&#125;;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[contents,userId]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 查询数据列表</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">queryList</span>(<span class="params">size,offset</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`SELECT </span></span><br><span class="line"><span class="string">    m.id as id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span></span><br><span class="line"><span class="string">    JSON_OBJECT(&#x27;id&#x27;,u.id,&#x27;name&#x27;,u.name) as userInfo</span></span><br><span class="line"><span class="string">    FROM moment as m</span></span><br><span class="line"><span class="string">    LEFT JOIN user as u ON u.id=m.user_id</span></span><br><span class="line"><span class="string">    LIMIT ? OFFSET ?`</span>;</span><br><span class="line">    <span class="comment">// 这里如果写成String()的话,如果用户不传size,offset,接口也能通;如果是Number的话,会报错;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[<span class="title class_">String</span>(size),<span class="title class_">String</span>(offset)]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 查询动态详情(将&#x27;查询数据列表&#x27;的LIMIT...ON...改为WHERE...即可)</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">queryDetailById</span>(<span class="params">momentId</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`SELECT </span></span><br><span class="line"><span class="string">    m.id as id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span></span><br><span class="line"><span class="string">    JSON_OBJECT(&#x27;id&#x27;,u.id,&#x27;name&#x27;,u.name) as userInfo</span></span><br><span class="line"><span class="string">    FROM moment as m</span></span><br><span class="line"><span class="string">    LEFT JOIN user as u ON u.id=m.user_id</span></span><br><span class="line"><span class="string">    WHERE m.id=?`</span>;</span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[momentId]);</span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><blockquote><p>通过<code>/moment/1</code>(GET)获取详情数据。</p></blockquote><h3 id="修改动态"><a href="#修改动态" class="headerlink" title="修改动态"></a>修改动态</h3><blockquote><p>修改列表某一条数据的详情。</p></blockquote><ul><li><code>router</code>文件夹下的<code>moment.router.js</code>，新增修改用户动态接口；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">momentRouter.<span class="title function_">patch</span>(<span class="string">&quot;/:momentId&quot;</span>, vertifyToken, update);</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>moment.controller.js</code>，新增修改用户的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 修改动态</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">update</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; momentId &#125; = ctx.<span class="property">params</span>;</span><br><span class="line">  <span class="keyword">const</span> &#123; content &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">updateById</span>(content, momentId);</span><br><span class="line">  ctx.<span class="property">body</span> = &#123;</span><br><span class="line">    <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&quot;修改动态成功&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: result,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>moment.service.js</code>，新增修改用户的SQL操作；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 修改动态</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">updateById</span>(<span class="params">content,momentId</span>)&#123;</span><br><span class="line">  <span class="keyword">const</span> statement = <span class="string">`UPDATE moment SET content=? WHERE id=?`</span>;</span><br><span class="line">  <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[content,momentId]);</span><br><span class="line">  <span class="keyword">return</span> serviceResult;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>通过<code>/moment/1</code>(PATCH)修改详情数据。</p></blockquote><p>但是现在只要<code>token</code>有效，所有人的动态信息都能修改；正常来说，只能修改私人的动态，即：用户登录的id和数据库表中发表此动态的id一致可以修改，否则不能修改；</p><ul><li>增加验证修改权限的中间件</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="operator">/</span><span class="operator">/</span> 此<span class="keyword">SQL</span>语句包含了查询的ID与用户的ID;如果筛选条件都满足的话返回一条数据,否则为空;</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> moment <span class="keyword">WHERE</span> id<span class="operator">=</span><span class="number">1</span> <span class="keyword">AND</span> user_id <span class="operator">=</span><span class="number">1</span></span><br></pre></td></tr></table></figure><ul><li><code>router</code>文件夹下的<code>moment.router.js</code>，新增修改用户动态权限的验证；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;vertifyMomentPermission&#125;= <span class="built_in">require</span>(<span class="string">&quot;../middleware/permission.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; postUpdates,list,detail,update&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/moment.controller&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> momentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/moment&quot;</span> &#125;);</span><br><span class="line"><span class="comment">// 修改动态(登录之后才能,引入验证token的中间件)</span></span><br><span class="line"><span class="comment">// 用户登录的id和数据库表中发表此动态的id一致可以修改，否则不能修改</span></span><br><span class="line">momentRouter.<span class="title function_">patch</span>(<span class="string">&quot;/:momentId&quot;</span>, vertifyToken, vertifyMomentPermission,update);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = momentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>middleware</code>文件夹下新建<code>permission.middleware.js</code>，验证登录的id是否有权限更改相关数据；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> permissionService = <span class="built_in">require</span>(<span class="string">&quot;../service/permission.service&quot;</span>);</span><br><span class="line"><span class="comment">// 验证登录的id是否有权限更改相关数据</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">vertifyMomentPermission</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">// 上个验证token的中间件在ctx上绑定了userInfo,即登录的用户信息;</span></span><br><span class="line">  <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">  <span class="keyword">const</span> &#123; momentId &#125; = ctx.<span class="property">params</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">await</span> permissionService.<span class="title function_">checkMoment</span>(id, momentId);</span><br><span class="line">  <span class="keyword">if</span> (result.<span class="property">length</span> === <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> permissionError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">NO_PERMISSION</span>);</span><br><span class="line">    <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>, permissionError, ctx);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  vertifyMomentPermission,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下新建<code>permission.service.js</code>，用户查询数据库；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">PermissionService</span> &#123;</span><br><span class="line">    <span class="comment">// 数据库查看是否存在相应权限</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">checkMoment</span>(<span class="params">userId, momentId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`SELECT * FROM moment WHERE id=? AND user_id=?`</span>;</span><br><span class="line">    <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement, [momentId, userId]);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">PermissionService</span>();</span><br></pre></td></tr></table></figure><ul><li><code>constants</code>文件夹下<code>error-types.js</code>，新增无权限的常量；</li></ul><figure class="highlight js"><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"><span class="keyword">const</span> <span class="variable constant_">NO_PERMISSION</span> = <span class="string">&quot;no_permission&quot;</span>;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="variable constant_">NO_PERMISSION</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li><code>app</code>文件夹下<code>errorHandler.js</code>，新增无权限的判断；</li></ul><figure class="highlight js"><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"><span class="keyword">case</span> errorType.<span class="property">NO_PERMISSION</span>:</span><br><span class="line">  status = <span class="number">403</span>; </span><br><span class="line">  message = <span class="string">&quot;权限不足~&quot;</span>;</span><br><span class="line"><span class="keyword">break</span>; </span><br></pre></td></tr></table></figure><h3 id="删除动态"><a href="#删除动态" class="headerlink" title="删除动态"></a>删除动态</h3><ul><li><code>router</code>文件夹下的<code>moment.router.js</code>，新增删除用户动态接口；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;vertifyMomentPermission&#125;= <span class="built_in">require</span>(<span class="string">&quot;../middleware/permission.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; postUpdates,list,detail,update,remove&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/moment.controller&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> momentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/moment&quot;</span> &#125;);</span><br><span class="line"><span class="comment">// 删除动态</span></span><br><span class="line">momentRouter.<span class="title function_">delete</span>(<span class="string">&quot;/:momentId&quot;</span>, vertifyToken, vertifyMomentPermission,remove);</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>moment.controller.js</code>，新增删除用户的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 删除动态</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">remove</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; momentId &#125; = ctx.<span class="property">params</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">removeById</span>(momentId);</span><br><span class="line">  ctx.<span class="property">body</span> = &#123;</span><br><span class="line">    <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&quot;删除动态成功&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: result,</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>moment.service.js</code>，新增删除用户的SQL操作；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 删除动态</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">removeById</span>(<span class="params">momentId</span>)&#123;</span><br><span class="line">  <span class="keyword">const</span> statement = <span class="string">`DELETE FROM moment WHERE id=?`</span>;</span><br><span class="line">  <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[momentId]);</span><br><span class="line">  <span class="keyword">return</span> serviceResult;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>通过<code>/moment/1</code>(DELETE)删除详情数据。</p></blockquote><h2 id="评论动态接口-一对多"><a href="#评论动态接口-一对多" class="headerlink" title="评论动态接口(一对多)"></a>评论动态接口(一对多)</h2><blockquote><p>设计表字段思路：谁，发表了什么评论，该评论评论了哪条动态；</p><p>一条评论(含唯一id)只能是一个用户发的，一个用户可以发多条评论(含唯一id)；</p><p>属于”一对多”关系型数据库表；</p></blockquote><h3 id="数据库表-1"><a href="#数据库表-1" class="headerlink" title="数据库表"></a>数据库表</h3><figure class="highlight sql"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">--  创建comment 评论表</span></span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `comment`(</span><br><span class="line"> id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line"><span class="comment">--  评论的内容</span></span><br><span class="line"> content <span class="type">VARCHAR</span>(<span class="number">1000</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span>, </span><br><span class="line"><span class="comment">--  在哪条动态下评论的</span></span><br><span class="line"> moment_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"><span class="comment">--  谁评论的</span></span><br><span class="line"> user_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"><span class="comment">--  此条动态有多个评论,给每条评论一个id;就可以实现 评论 动态下面的某一条具体评论的效果(回复评论);</span></span><br><span class="line"> comment_id <span class="type">INT</span> <span class="keyword">DEFAULT</span> <span class="keyword">NULL</span>,</span><br><span class="line"> ctrateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> updateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span> <span class="keyword">ON</span> <span class="keyword">UPDATE</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> <span class="keyword">FOREIGN</span> KEY(moment_id) <span class="keyword">REFERENCES</span> moment(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE,</span><br><span class="line"> <span class="keyword">FOREIGN</span> KEY(user_id) <span class="keyword">REFERENCES</span> <span class="keyword">user</span>(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE,</span><br><span class="line"><span class="comment">--  comment_id对应自身表中的id</span></span><br><span class="line"> <span class="keyword">FOREIGN</span> KEY(comment_id) <span class="keyword">REFERENCES</span> comment(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE</span><br><span class="line">)</span><br></pre></td></tr></table></figure><h3 id="发表评论"><a href="#发表评论" class="headerlink" title="发表评论"></a>发表评论</h3><blockquote><p>需要知道：谁，在哪个动态下，评论了什么内容；</p></blockquote><ul><li><code>router</code>文件夹下新建<code>comment.router.js</code>，用来存放发表评论的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; create &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/comment.controller&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> commentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/comment&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 增：新增评论</span></span><br><span class="line">commentRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyToken, create);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = commentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下新建<code>comment.controller.js</code>，用来存放发表评论的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> commentService = <span class="built_in">require</span>(<span class="string">&quot;../service/comment.service&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">CommentController</span> &#123;</span><br><span class="line">  <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 获取动态的内容,评论动态的Id</span></span><br><span class="line">    <span class="keyword">const</span> &#123; content, momentId &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 获取动态是谁发布的(谁登录就是谁发布的,验证token的时候再ctx上绑定了userInfo属性);</span></span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> commentService.<span class="title function_">create</span>(content, id, momentId);</span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;发表评论成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">CommentController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下新建<code>comment.service.js</code>，用来存放发表评论的SQL处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">CommentService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">content, userId, momentId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO comment (content,user_id,moment_id) VALUES (?,?,?)`</span>;</span><br><span class="line">    <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement, [content,userId,momentId]);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">CommentService</span>();</span><br></pre></td></tr></table></figure><blockquote><p>通过<code>/comment</code>(POST)发表评论；例：body为</p><p><code>&#123;     &quot;content&quot;: &quot;kunkun打球好帅&quot;,     &quot;momentId&quot;: 3 &#125;</code></p><p>注：其中<code>momentId</code>的value值，必须是moment表中存在的，因为设置了外键约束。</p></blockquote><h3 id="回复评论"><a href="#回复评论" class="headerlink" title="回复评论"></a>回复评论</h3><blockquote><p>相比较于发表评论，回复评论需要多一个参数，即：<code>comment_id</code>；</p></blockquote><ul><li><code>router</code>文件夹下的<code>comment.router.js</code>，用来存放回复评论的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; create,reply &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/comment.controller&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> commentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/comment&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 增：新增评论</span></span><br><span class="line">commentRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyToken, create);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 增：回复评论</span></span><br><span class="line">commentRouter.<span class="title function_">post</span>(<span class="string">&quot;/reply&quot;</span>, vertifyToken, reply);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = commentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>comment.controller.js</code>，用来存回复的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> commentService = <span class="built_in">require</span>(<span class="string">&quot;../service/comment.service&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">CommentController</span> &#123;</span><br><span class="line">  <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 获取动态的内容,评论动态的Id</span></span><br><span class="line">    <span class="keyword">const</span> &#123; content, momentId &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 获取动态是谁发布的(谁登录就是谁发布的,验证token的时候再ctx上绑定了userInfo属性);</span></span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> commentService.<span class="title function_">create</span>(content, id, momentId);</span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;发表评论成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 回复动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">reply</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 获取动态的内容,评论动态的Id,回复的Id</span></span><br><span class="line">    <span class="keyword">const</span> &#123; content, momentId,commentId &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 获取动态是谁发布的(谁登录就是谁发布的,验证token的时候再ctx上绑定了userInfo属性);</span></span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> commentService.<span class="title function_">reply</span>(content, id, momentId,commentId);</span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;回复评论成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">CommentController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>comment.service.js</code>，用来存放回复评论的SQL处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">CommentService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">content, userId, momentId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO comment (content,user_id,moment_id) VALUES (?,?,?)`</span>;</span><br><span class="line">    <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement, [content,userId,momentId]);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">reply</span>(<span class="params">content, userId, momentId,commentId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO comment (content,user_id,moment_id,comment_id) VALUES (?,?,?,?)`</span>;</span><br><span class="line">    <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement, [content,userId,momentId,commentId]);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">CommentService</span>();</span><br></pre></td></tr></table></figure><blockquote><p>通过<code>/comment/reply</code>(POST)发表评论；例：body为</p><p><code>&#123;     &quot;content&quot;: &quot;确实帅,我家鸽鸽太有实力了&quot;,     &quot;momentId&quot;: 3,     &quot;commentId&quot;:6 &#125;</code></p><p>注：其中<code>momentId/commentId</code>的value值，必须是moment&#x2F;comment表中存在的，因为设置了外键约束。</p></blockquote><h2 id="动态信息与评论接口-一对多"><a href="#动态信息与评论接口-一对多" class="headerlink" title="动态信息与评论接口(一对多)"></a>动态信息与评论接口(一对多)</h2><blockquote><p>一般来说，查询动态信息列表及详情的时候，也需要将评论一并查询出来。现需求如下：</p></blockquote><ul><li>查询动态列表时，显示评论的个数；</li><li>查询动态详情时，显示评论的列表；</li></ul><h3 id="查询动态列表-1"><a href="#查询动态列表-1" class="headerlink" title="查询动态列表"></a>查询动态列表</h3><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 查询动态列表SQL</span></span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">m.id <span class="keyword">as</span> id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span><br><span class="line"><span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,u.id,<span class="string">&#x27;name&#x27;</span>,u.name) <span class="keyword">as</span> userInfo</span><br><span class="line"><span class="keyword">FROM</span> moment <span class="keyword">as</span> m</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `<span class="keyword">user</span>` <span class="keyword">as</span> u <span class="keyword">ON</span> u.id<span class="operator">=</span>m.user_id</span><br><span class="line">LIMIT <span class="number">10</span> <span class="keyword">OFFSET</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 查询评论个数SQL</span></span><br><span class="line"><span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(<span class="operator">*</span>) <span class="keyword">FROM</span> `comment` <span class="keyword">WHERE</span> moment_id<span class="operator">=</span><span class="number">3</span></span><br></pre></td></tr></table></figure><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 两者结合(SQL子查询)</span></span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">m.id <span class="keyword">as</span> id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span><br><span class="line"><span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,u.id,<span class="string">&#x27;name&#x27;</span>,u.name) <span class="keyword">as</span> userInfo,</span><br><span class="line">(<span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(<span class="operator">*</span>) <span class="keyword">FROM</span> comment <span class="keyword">WHERE</span> comment.moment_id<span class="operator">=</span>m.id) commentCount</span><br><span class="line"><span class="keyword">FROM</span> moment <span class="keyword">as</span> m</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `<span class="keyword">user</span>` <span class="keyword">as</span> u <span class="keyword">ON</span> u.id<span class="operator">=</span>m.user_id</span><br><span class="line">LIMIT <span class="number">10</span> <span class="keyword">OFFSET</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><h3 id="查询动态详情-1"><a href="#查询动态详情-1" class="headerlink" title="查询动态详情"></a>查询动态详情</h3><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 查询动态详情SQL</span></span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">    m.id <span class="keyword">as</span> id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span><br><span class="line">    <span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,u.id,<span class="string">&#x27;name&#x27;</span>,u.name) <span class="keyword">as</span> userInfo</span><br><span class="line">    <span class="keyword">FROM</span> moment <span class="keyword">as</span> m</span><br><span class="line">    <span class="keyword">LEFT</span> <span class="keyword">JOIN</span> <span class="keyword">user</span> <span class="keyword">as</span> u <span class="keyword">ON</span> u.id<span class="operator">=</span>m.user_id</span><br><span class="line">    <span class="keyword">WHERE</span> m.id<span class="operator">=</span><span class="number">3</span></span><br></pre></td></tr></table></figure><figure class="highlight sql"><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"><span class="comment">-- 查询评论列表SQL</span></span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `comment` <span class="keyword">WHERE</span> `comment`.moment_id<span class="operator">=</span><span class="number">3</span></span><br><span class="line"><span class="comment">-- 可以将两者查询出来,然后使用JS进行拼接处理;</span></span><br></pre></td></tr></table></figure><h2 id="标签动态接口-多对多"><a href="#标签动态接口-多对多" class="headerlink" title="标签动态接口(多对多)"></a>标签动态接口(多对多)</h2><blockquote><p>设计表字段思路：标签对应了哪条动态；没人在意标签是谁建的；</p><p>一个标签可以对应多条动态，一条动态可以有个标签；</p><p>属于”多对多”关系型数据库表；</p></blockquote><h3 id="数据库表-2"><a href="#数据库表-2" class="headerlink" title="数据库表"></a>数据库表</h3><ul><li>标签表</li></ul><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> label(</span><br><span class="line">id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line">name <span class="type">VARCHAR</span>(<span class="number">10</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span> <span class="keyword">UNIQUE</span>,</span><br><span class="line">ctrateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line">updateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span> <span class="keyword">ON</span> <span class="keyword">UPDATE</span> <span class="built_in">CURRENT_TIMESTAMP</span></span><br><span class="line">)</span><br></pre></td></tr></table></figure><ul><li>关系表(记录标签，动态的关系)</li></ul><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> moment_label(</span><br><span class="line"><span class="comment">-- id INT PRIMARY KEY AUTO_INCREMENT, -- 这里使用联合主键,当然也可以用id</span></span><br><span class="line">moment_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line">label_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"><span class="keyword">PRIMARY</span> KEY(moment_id,label_id),<span class="comment">-- 联合主键</span></span><br><span class="line">ctrateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line">updateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span> <span class="keyword">ON</span> <span class="keyword">UPDATE</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"><span class="keyword">FOREIGN</span> KEY(moment_id) <span class="keyword">REFERENCES</span> moment(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE,</span><br><span class="line"><span class="keyword">FOREIGN</span> KEY(label_id) <span class="keyword">REFERENCES</span> label(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE</span><br><span class="line">)</span><br></pre></td></tr></table></figure><ul><li>多对多，三张表，关系表加外键；</li><li>添加数据时，先添加父表记录(moment，label)，再添加子表(moment_label)记录；</li><li>删除数据时，先删除子表记录(moment_label)，再删除父表记录(moment，label)；</li><li>详细代码：可参考上文接口；仅是sql语句更变了；</li></ul><h2 id="文件处理接口"><a href="#文件处理接口" class="headerlink" title="文件处理接口"></a>文件处理接口</h2><h3 id="上传头像"><a href="#上传头像" class="headerlink" title="上传头像"></a>上传头像</h3><ul><li>安装处理文件的库</li></ul><blockquote><p><code>npm i koa-multer</code>的时候给出警告: Please use @koa&#x2F;multer instead；</p><p>通过查阅github发现：koa-multer在2018年就不再维护，但是koa官方自己研发了相关multer库：<a href="https://github.com/koajs/multer">@koa&#x2F;multer</a>，这里使用官方推荐的；</p><p>相对于koa-multer，koa&#x2F;multer仅仅在获取文件的方式从ctx.req.file–&gt;ctx.request.file；别的用法和koa-multer一致；</p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save @koa/multer multer</span><br></pre></td></tr></table></figure><h4 id="基本逻辑"><a href="#基本逻辑" class="headerlink" title="基本逻辑"></a>基本逻辑</h4><ul><li><code>router</code>文件夹下新建<code>file.router.js</code>，用来存放上传头像的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; handleAvatar &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/handleAvatar.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; uploadAvatar &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/file.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> fileRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/file&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line">fileRouter.<span class="title function_">post</span>(<span class="string">&quot;/avatar&quot;</span>, vertifyToken, handleAvatar, uploadAvatar);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = fileRouter;</span><br></pre></td></tr></table></figure><ul><li><code>middleware</code>文件夹下新建<code>handleAvatar.middleware.js</code>，用来存放上传头像中间件的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;@koa/multer&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> uploadAvatars = <span class="title function_">multer</span>(&#123;</span><br><span class="line">  <span class="comment">// 注意这里的./是和程序的启动目录有关系的，不是当前目录</span></span><br><span class="line">  <span class="attr">dest</span>: <span class="string">&quot;./uploads/&quot;</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> handleAvatar = uploadAvatars.<span class="title function_">single</span>(<span class="string">&quot;avatar&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  handleAvatar,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下新建<code>file.controller.js</code>，用来存放上传头像的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">FileController</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> files = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(files);</span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileController</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">/**console.log(files)的打印:</span></span><br><span class="line"><span class="comment">&#123;</span></span><br><span class="line"><span class="comment">  fieldname: &#x27;avatar&#x27;,</span></span><br><span class="line"><span class="comment">  originalname: &#x27;default_cover_7.webp&#x27;,</span></span><br><span class="line"><span class="comment">  encoding: &#x27;7bit&#x27;,</span></span><br><span class="line"><span class="comment">  mimetype: &#x27;image/webp&#x27;,</span></span><br><span class="line"><span class="comment">  destination: &#x27;./uploads/&#x27;,</span></span><br><span class="line"><span class="comment">  filename: &#x27;7a30342648914762d1cc040219d2a6e1&#x27;,</span></span><br><span class="line"><span class="comment">  path: &#x27;uploads\\7a30342648914762d1cc040219d2a6e1&#x27;,</span></span><br><span class="line"><span class="comment">  size: 382920</span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure><p>使用postman请求<code>/file/avatar</code>(POST)，form-data选择File，key为avatar，value为上传的头像；发现项目自动创建了uploads文件夹，里面包含了上传的头像。</p><h4 id="数据库表-3"><a href="#数据库表-3" class="headerlink" title="数据库表"></a>数据库表</h4><blockquote><p>根据file信息，挑选几个有用的字段进行保存，还需要将上传头像的用户ID进行保存，后续为了给这个人设置头像；</p></blockquote><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `avatar`(</span><br><span class="line"> id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line"> filename <span class="type">VARCHAR</span>(<span class="number">255</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span> <span class="keyword">UNIQUE</span>,</span><br><span class="line"> mimetype <span class="type">VARCHAR</span>(<span class="number">30</span>),</span><br><span class="line"> size <span class="type">INT</span>,</span><br><span class="line"> user_id <span class="type">INT</span>,</span><br><span class="line"> ctrateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> updateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span> <span class="keyword">ON</span> <span class="keyword">UPDATE</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> <span class="keyword">FOREIGN</span> KEY(user_id) <span class="keyword">REFERENCES</span> <span class="keyword">user</span>(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE</span><br><span class="line">)</span><br></pre></td></tr></table></figure><h4 id="插入数据-1"><a href="#插入数据-1" class="headerlink" title="插入数据"></a>插入数据</h4><ul><li>在基础逻辑上，在<code>controller</code>文件夹下<code>file.controller.js</code>中，优化存放上传头像的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> serviceFile = <span class="built_in">require</span>(<span class="string">&quot;../service/file.service&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">FileController</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> files = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="comment">// console.log(files);</span></span><br><span class="line">    <span class="comment">// 1.获取相应的信息</span></span><br><span class="line">    <span class="keyword">const</span> &#123;filename,mimetype,size &#125; = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="keyword">const</span> &#123;id&#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 2.保存到数据库</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> serviceFile.<span class="title function_">uploadAvatar</span>(filename,mimetype,size,id);</span><br><span class="line">    <span class="comment">// 3.返回</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下新建<code>file.service.js</code>，用来存放上传头像的SQL逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">FileService</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">filename,mimetype,size,userId</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`INSERT INTO avatar (filename,mimetype,size,user_id) VALUES (?,?,?,?)`</span>;</span><br><span class="line">        <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[filename,mimetype,size,userId]);</span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileService</span>();</span><br></pre></td></tr></table></figure><h3 id="浏览头像"><a href="#浏览头像" class="headerlink" title="浏览头像"></a>浏览头像</h3><blockquote><p>现在头像是没办法浏览的；现在提供一个浏览头像的接口；</p></blockquote><ul><li>因为头像是user的，所以这里选择在user下提供浏览头像的接口；<code>router</code>文件夹下的<code>user.router.js</code>，用来提供一个浏览头像的接口；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/users&quot;</span> &#125;);</span><br><span class="line"><span class="keyword">const</span> &#123;verifyUser,handlePassword&#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/user.middleware.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> &#123;create,showAvatarImage&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/user.controller.js&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册用户</span></span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,verifyUser,handlePassword, create);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 为用户提供头像展示(看图片不需要验证权限)</span></span><br><span class="line">userRouter.<span class="title function_">get</span>(<span class="string">&quot;/avatar/:userId&quot;</span>,showAvatarImage)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>user.controller.js</code>，用来处理用户头像展示的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs= <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> service = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> fileService = <span class="built_in">require</span>(<span class="string">&quot;../service/file.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserController</span> &#123;</span><br><span class="line">  <span class="comment">// 因为操作数据库是异步操作的,所以直接用 async 函数; async函数为对象的方法,下面直接module导出了一个对象;</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 获取用户请求传递的参数</span></span><br><span class="line">    <span class="keyword">const</span> user = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 查询数据</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> service.<span class="title function_">create</span>(user);</span><br><span class="line">    <span class="comment">// 返回数据</span></span><br><span class="line">    ctx.<span class="property">body</span> = result;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 用户头像展示</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">showAvatarImage</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 1.获取用户的id</span></span><br><span class="line">    <span class="keyword">const</span> &#123; userId &#125; = ctx.<span class="property">params</span>;</span><br><span class="line">    <span class="comment">// 2.获取userID对应的头像信息</span></span><br><span class="line">    <span class="keyword">const</span> avatarInfo = <span class="keyword">await</span> fileService.<span class="title function_">showAvatarImageById</span>(userId);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(avatarInfo)</span><br><span class="line">    <span class="comment">// 3.读取头像所在的文件</span></span><br><span class="line">    <span class="keyword">const</span> &#123; filename, mimetype &#125; = avatarInfo;</span><br><span class="line">    <span class="comment">// 创建一个可读流</span></span><br><span class="line">    ctx.<span class="property">body</span> = fs.<span class="title function_">createReadStream</span>(<span class="string">`./uploads/<span class="subst">$&#123;filename&#125;</span>`</span>);</span><br><span class="line">    <span class="comment">// 设置响应头信息</span></span><br><span class="line">    ctx.<span class="title function_">set</span>(<span class="string">&quot;Content-Type&quot;</span>, mimetype);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserController</span>(); <span class="comment">//导出的是一个对象(类的实例)</span></span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>file.service.js</code>，用来做用户头像展示的SQL逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">FileService</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">filename,mimetype,size,userId</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`INSERT INTO avatar (filename,mimetype,size,user_id) VALUES (?,?,?,?)`</span>;</span><br><span class="line">        <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[filename,mimetype,size,userId]);</span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">showAvatarImageById</span>(<span class="params">userId</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`SELECT * FROM avatar WHERE user_id=?`</span>;</span><br><span class="line">        <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[userId]);</span><br><span class="line">        <span class="comment">// 用户可能上传多张头像,所以result数组里面展示最后一个对象;</span></span><br><span class="line">        <span class="keyword">return</span> result[result.<span class="property">length</span>-<span class="number">1</span>];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileService</span>();</span><br></pre></td></tr></table></figure><p>浏览器通过<code>http://127.0.0.1:3000/users/avatar/1</code>；或者postman通过<code>/users/avatar/1</code>即可查阅图片；</p><h4 id="修改user表"><a href="#修改user表" class="headerlink" title="修改user表"></a>修改user表</h4><blockquote><p>在user表中，增加一个avatar_url字段；</p></blockquote><ul><li><code>controller</code>文件夹下的<code>file.controller.js</code>，用来处理上传用户头像存储的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> serviceFile = <span class="built_in">require</span>(<span class="string">&quot;../service/file.service&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userService = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;<span class="variable constant_">SERVER_HOST</span>,<span class="variable constant_">APP_PORT</span>&#125; = <span class="built_in">require</span>(<span class="string">&quot;../app/config&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">FileController</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> files = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="comment">// console.log(files);</span></span><br><span class="line">    <span class="comment">// 1.获取相应的信息</span></span><br><span class="line">    <span class="keyword">const</span> &#123;filename,mimetype,size &#125; = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="keyword">const</span> &#123;id&#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 2.保存到数据库</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> serviceFile.<span class="title function_">uploadAvatar</span>(filename,mimetype,size,id);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将头像地址信息在user表中也存储一份;</span></span><br><span class="line">    <span class="keyword">const</span> avatar_url = <span class="string">`<span class="subst">$&#123;SERVER_HOST&#125;</span>:<span class="subst">$&#123;APP_PORT&#125;</span>/users/avatar/<span class="subst">$&#123;id&#125;</span>`</span>;</span><br><span class="line">    <span class="keyword">const</span> userResult = <span class="keyword">await</span> userService.<span class="title function_">updateUserAvatar</span>(avatar_url,id);</span><br><span class="line">    <span class="comment">// 3.返回</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: avatar_url,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>user.service.js</code>，用来做更新用户头像地址的SQL逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="comment">// 专门做数据库操作的;</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">    <span class="comment">// 更新用户头像地址</span></span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">updateUserAvatar</span>(<span class="params">avatarUrl,userId</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`UPDATE user SET avatar_url=? WHERE id=?`</span>;</span><br><span class="line">        <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[avatarUrl,userId]);</span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>file.controller.js</code>，返回头像地址需要写到配置文件里</li></ul><figure class="highlight js"><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"># .<span class="property">env</span></span><br><span class="line"><span class="variable constant_">APP_PORT</span>=<span class="number">3000</span></span><br><span class="line"><span class="variable constant_">SERVER_HOST</span>=<span class="attr">http</span>:<span class="comment">//192.168.11.242</span></span><br></pre></td></tr></table></figure><ul><li><code>app</code>文件夹下的<code>config.js</code>将配置文件中的变量暴露出去；</li></ul><figure class="highlight js"><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"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="variable constant_">APP_PORT</span></span><br><span class="line">    <span class="variable constant_">SERVER_HOST</span></span><br><span class="line">&#125; = process.<span class="property">env</span>;</span><br></pre></td></tr></table></figure><p>请求<code>/file/avatar</code>(POST)上传文件，如果成功，返回结果如下：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;code&quot;</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="string">&quot;message&quot;</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">    <span class="string">&quot;data&quot;</span>: <span class="string">&quot;http://192.168.11.242:3000/users/avatar/1&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 通过访问http://192.168.11.242:3000/users/avatar/1(接口),访问图片。</span></span><br></pre></td></tr></table></figure><blockquote><p>但是吧，这个跟我们平时见到的图片地址不一样，我们平时见到的图片地址是xx.jpg&#x2F;png结尾的，而不是上面这种。下面讲述一下如何展示图片地址是xx.jpg&#x2F;png结尾的。</p></blockquote><h3 id="上传头像2"><a href="#上传头像2" class="headerlink" title="上传头像2"></a>上传头像2</h3><p>参考文献：<a href="https://blog.csdn.net/LQlove1/article/details/128698984">koa-multer实现图片上传</a>；<a href="https://blog.csdn.net/zy21131437/article/details/130440198">Koa实现图片上传功能</a>；<a href="https://juejin.cn/post/7033290552523096078">koa处理上传图片</a>；</p><blockquote><p>常见图片后缀的展示，需要用到node自带的path模块和static模块和第三方包koa&#x2F;multer；</p><p>在avatar表中，现在的filename是存储的类似于<code>e91b35e24586c1cb208a544f6acb5961</code>的图片信息，需要改为存储有后缀名的filename。</p><p>这里问了公司后端：filename一般都是设置为UNIQUE，且不会保留前端传过来的本身的文件名；因为如果传过来两个一样的文件名，后端不知道返回哪个；除非已经做好命名规范，可不设置为UNIQUE；</p><p>即：上传的文件名一般不保存，除非约定好了上传的文件名唯一；</p></blockquote><ul><li>安装所需依赖</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install koa<span class="operator">-</span><span class="keyword">static</span></span><br></pre></td></tr></table></figure><ul><li><code>router</code>文件夹下<code>file.router.js</code>，新写一个上传头像的路由逻辑；</li></ul><figure class="highlight js"><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="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; handleAvatar,handleAvatar2 &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/handleAvatar.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; uploadAvatar,uploadAvatar2 &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/file.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> fileRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/file&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 上传头像,没有常见的后缀名,即通过接口访问图片地址，不需要后缀</span></span><br><span class="line">fileRouter.<span class="title function_">post</span>(<span class="string">&quot;/avatar&quot;</span>, vertifyToken, handleAvatar, uploadAvatar);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 上传头像，有常见的后缀名</span></span><br><span class="line">fileRouter.<span class="title function_">post</span>(<span class="string">&quot;/avatar2&quot;</span>, vertifyToken, handleAvatar2, uploadAvatar2);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = fileRouter;</span><br></pre></td></tr></table></figure><ul><li><code>middleware</code>文件夹下的<code>handleAvatar.middleware.js</code>，新写一个存放上传头像中间件的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;@koa/multer&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> uploadAvatars = <span class="title function_">multer</span>(&#123;</span><br><span class="line">  <span class="comment">// 注意这里的./是和程序的启动目录有关系的，不是当前目录</span></span><br><span class="line">  <span class="attr">dest</span>: <span class="string">&quot;./uploads/&quot;</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> handleAvatar = uploadAvatars.<span class="title function_">single</span>(<span class="string">&quot;avatar&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 上传头像，有常见的后缀名</span></span><br><span class="line"><span class="keyword">const</span> storage = multer.<span class="title function_">diskStorage</span>(&#123;</span><br><span class="line">  <span class="attr">destination</span>: <span class="function">(<span class="params">req, file, cb</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 可以用 path.join(__dirname ,&#x27;xxx&#x27;)拼接,就不用考虑相对路径的问题了;</span></span><br><span class="line">    <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="string">&quot;./uploads/&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line"> </span><br><span class="line">  <span class="comment">// 这里一般不会保留原来的,否则会导致后端不知道返回啥;除非约定好了</span></span><br><span class="line">  <span class="attr">filename</span>: <span class="function">(<span class="params">req, file, cb</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="title class_">Date</span>.<span class="title function_">now</span>() + path.<span class="title function_">extname</span>(file.<span class="property">originalname</span>));</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> uploadAvatars2 = <span class="title function_">multer</span>(&#123;</span><br><span class="line">  storage,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> handleAvatar2 = uploadAvatars2.<span class="title function_">single</span>(<span class="string">&quot;avatar2&quot;</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  handleAvatar,</span><br><span class="line">  handleAvatar2,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>file.controller.js</code>，新写一个存放上传头像的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> serviceFile = <span class="built_in">require</span>(<span class="string">&quot;../service/file.service&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userService = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; <span class="variable constant_">SERVER_HOST</span>, <span class="variable constant_">APP_PORT</span> &#125; = <span class="built_in">require</span>(<span class="string">&quot;../app/config&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">FileController</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> files = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="comment">// console.log(files);</span></span><br><span class="line">    <span class="comment">// 1.获取相应的信息</span></span><br><span class="line">    <span class="keyword">const</span> &#123; filename, mimetype, size &#125; = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 2.保存到数据库</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> serviceFile.<span class="title function_">uploadAvatar</span>(filename, mimetype, size, id);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将头像地址信息在user表中也存储一份;</span></span><br><span class="line">    <span class="keyword">const</span> avatar_url = <span class="string">`<span class="subst">$&#123;SERVER_HOST&#125;</span>:<span class="subst">$&#123;APP_PORT&#125;</span>/users/avatar/<span class="subst">$&#123;id&#125;</span>`</span>;</span><br><span class="line">    <span class="keyword">await</span> userService.<span class="title function_">updateUserAvatar</span>(avatar_url, id);</span><br><span class="line">    <span class="comment">// 3.返回</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: avatar_url,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">    </span><br><span class="line">  <span class="comment">// 有后缀名的头像</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">uploadAvatar2</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> files = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="comment">// console.log(files);</span></span><br><span class="line">    <span class="comment">// 1.获取相应的信息</span></span><br><span class="line">    <span class="keyword">const</span> &#123; filename, mimetype, size &#125; = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 2.保存到数据库</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> serviceFile.<span class="title function_">uploadAvatar</span>(filename, mimetype, size, id);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将头像地址信息在user表中也存储一份;</span></span><br><span class="line">    <span class="keyword">const</span> avatar_url = <span class="string">`<span class="subst">$&#123;SERVER_HOST&#125;</span>:<span class="subst">$&#123;APP_PORT&#125;</span>/<span class="subst">$&#123;filename&#125;</span>`</span>;</span><br><span class="line">    <span class="keyword">await</span> userService.<span class="title function_">updateUserAvatar</span>(avatar_url, id);</span><br><span class="line">    <span class="comment">// 3.返回</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: avatar_url,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>user.service.js</code>，用来做更新用户头像地址的SQL逻辑处理；(这个没有变)；相对于通过接口显示图片，有后缀的是通过koa-static展示的，所以可以不用专门写一个接口浏览头像；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">    <span class="comment">// 更新用户头像地址</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">updateUserAvatar</span>(<span class="params">avatarUrl,userId</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`UPDATE user SET avatar_url=? WHERE id=?`</span>;</span><br><span class="line">    <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[avatarUrl,userId]);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>koa-static静态服务：在<code>app</code>文件夹下的<code>index.js</code></li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path =<span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="keyword">static</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-static&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> useRoutes = <span class="built_in">require</span>(<span class="string">&quot;../router/index.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorHandler = <span class="built_in">require</span>(<span class="string">&quot;./errorHandler.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line"><span class="title function_">useRoutes</span>(app); <span class="comment">//传参app参数</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 静态资源服务</span></span><br><span class="line"><span class="keyword">const</span> filePath = path.<span class="title function_">resolve</span>(__dirname,<span class="string">&quot;../../uploads&quot;</span>);</span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">static</span>(filePath));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 错误处理</span></span><br><span class="line">app.<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>,errorHandler);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = app;</span><br></pre></td></tr></table></figure><p>请求<code>/file/avatar2</code>(POST)，文件格式选：form-data(File)，key为avatar2，value为文件；返回结果为：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;code&quot;</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="string">&quot;message&quot;</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">    <span class="string">&quot;data&quot;</span>: <span class="string">&quot;http://192.168.11.242:3000/1698373200499.webp&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 浏览器访问图片地址,能直接访问,则成功;</span></span><br></pre></td></tr></table></figure>]]></content>
+        <content type="html"><![CDATA[<h1 id="koa2项目实战"><a href="#koa2项目实战" class="headerlink" title="koa2项目实战"></a>koa2项目实战</h1><p>本文所有代码已上传：<a href="https://github.com/fsllala/koa2">github</a></p><h2 id="项目的搭建"><a href="#项目的搭建" class="headerlink" title="项目的搭建"></a>项目的搭建</h2><h3 id="目录结构的划分"><a href="#目录结构的划分" class="headerlink" title="目录结构的划分"></a>目录结构的划分</h3><ul><li>按照功能模块划分：例如：控制器(controller)的放在一起；操作数据库(service)的放在一起……</li><li>按照业务模块划分：一个完整的小功能放在一起；</li></ul><blockquote><p>本文将用<code>功能模块划分</code></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">-src</span><br><span class="line">    -main.<span class="property">js</span>  <span class="comment">//入口文件</span></span><br><span class="line">    -app <span class="comment">//全局文件夹</span></span><br><span class="line">    -controller <span class="comment">//所有的控制器</span></span><br><span class="line">    -service <span class="comment">//数据库操作相关</span></span><br><span class="line">    -router <span class="comment">//路由相关</span></span><br><span class="line">    -utils <span class="comment">//工具</span></span><br></pre></td></tr></table></figure><h4 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h4><figure class="highlight js"><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"><span class="comment">//在src目录下</span></span><br><span class="line">npm init -y</span><br><span class="line">npm i koa</span><br><span class="line">npm i nodemon -D    <span class="comment">//-D为开发依赖</span></span><br></pre></td></tr></table></figure><h4 id="设置快捷启动"><a href="#设置快捷启动" class="headerlink" title="设置快捷启动"></a>设置快捷启动</h4><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在package.json 配置</span></span><br><span class="line">  <span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;start&quot;</span>: <span class="string">&quot;nodemon ./src/main.js&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line"><span class="comment">// 之后可以直接通过 npm run start 方式启动项目,不需要找目录结构了</span></span><br></pre></td></tr></table></figure><h4 id="入口文件"><a href="#入口文件" class="headerlink" title="入口文件"></a>入口文件</h4><blockquote><p><code>main.js</code>键入如下代码：使用<code>nodemon main.js</code>即可启动服务；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;服务器启动成功~~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>但是入口文件中，代码越简洁越好，现在所有<code>app</code>的操作都在入口文件，不是很妥；</p></blockquote><h4 id="入口文件拆分"><a href="#入口文件拆分" class="headerlink" title="入口文件拆分"></a>入口文件拆分</h4><blockquote><p>在<code>app</code>文件中，新建<code>index.js</code>，用来放<code>app</code>的相关操作，然后在<strong>入口文件</strong>中，将其引入即可；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//app文件下的 index.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//入口文件 main.js</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="built_in">require</span>(<span class="string">&quot;./app/index.js&quot;</span>);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;服务器启动成功~~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h4 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h4><blockquote><p>端口号是直接在代码中写死的，不妥，需要<strong>抽离</strong>出来，写在<strong>配置文件</strong>中</p><p>在<strong>根目录</strong>（与<code>package.json</code>同级目录）下新建一个<code>.env</code>（environment）做<strong>配置文件</strong>用来存放所有抽离出来的<strong>环境变量</strong>，比如端口号；那么<strong>入口文件</strong>之如何读取到<code>.env</code>文件呢？</p></blockquote><ul><li><p>在<code>.env</code>配置文件中，写入<code>APP_PORT=3000</code></p></li><li><p>下载<code>dotenv</code>插件：</p><p><code>npm i dotenv</code></p><ul><li>因为<code>.env</code>文件是需要全局加载的，所以在<code>app</code>目录下新建<code>config.js</code>文件</li></ul></li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//  app/config.js</span></span><br><span class="line"><span class="keyword">const</span> dotenv = <span class="built_in">require</span>(<span class="string">&quot;dotenv&quot;</span>);</span><br><span class="line">dotenv.<span class="title function_">config</span>(); <span class="comment">//将.env中的变量挂载到process.env中</span></span><br><span class="line"><span class="comment">// console.log(process.env.APP_PORT);</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="variable constant_">APP_PORT</span></span><br><span class="line">&#125; = process.<span class="property">env</span>;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">const</span> app= <span class="built_in">require</span>(<span class="string">&quot;./app/index.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&quot;./app/config.js&quot;</span>);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(config.<span class="property">APP_PORT</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`server is running port is <span class="subst">$&#123;config.APP_PORT&#125;</span>`</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="用户注册接口"><a href="#用户注册接口" class="headerlink" title="用户注册接口"></a>用户注册接口</h2><blockquote><p>首先考虑： 请求路径与中间件处理的映射，但是<code>koa</code>不支持<code>app.post</code>等写法，只能用<code>app.use</code>，需要手动处理；所以只能借助路由第三方库<code>koa-router</code></p></blockquote><ul><li>下载路由第三方库：<code>npm i koa-router</code>；</li><li>查询数据需要获取到用户传递的参数，下载第三方库<code>npm i koa-bodyparser</code></li><li>使用<code>postman</code>进行测试；</li></ul><h3 id="架构基础写法"><a href="#架构基础写法" class="headerlink" title="架构基础写法"></a>架构基础写法</h3><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app文件下的 index.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line"></span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">ctx,next</span>)=&gt;</span>&#123;</span><br><span class="line">    ctx.<span class="property">body</span>=<span class="string">&quot;创建用户成功~&quot;</span>;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><blockquote><p>所有的路由相关的接口如果都写在 <code>app文件下的 index.js</code>里面的话，代码会显得很臃肿，而且也不容易进行后期维护；</p></blockquote><h3 id="架构进阶写法"><a href="#架构进阶写法" class="headerlink" title="架构进阶写法"></a>架构进阶写法</h3><h4 id="路由拆分"><a href="#路由拆分" class="headerlink" title="路由拆分"></a>路由拆分</h4><blockquote><p>在<code>router</code>文件夹下新建<code>user.router.js</code>，用来存储用户的路由信息；只负责注册接口，中间件处理逻辑不写在这里(见下文)；</p><p>将<code>router</code>路由抽离出去；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// router/user.router.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line"></span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">ctx,next</span>)=&gt;</span>&#123;</span><br><span class="line">    ctx.<span class="property">body</span>=<span class="string">&quot;创建用户成功~&quot;</span>;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app/index.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/user.router.js&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><blockquote><p>其实<strong>接口请求的中间件的逻辑</strong>(见下面代码)也是很多的，所以也需求抽取；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 接口请求的中间件的逻辑</span></span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">ctx,next</span>)=&gt;</span>&#123;</span><br><span class="line">    ctx.<span class="property">body</span>=<span class="string">&quot;创建用户成功~&quot;</span>;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//中的</span></span><br><span class="line">(ctx,next)=&gt;&#123;</span><br><span class="line">    ctx.<span class="property">body</span>=<span class="string">&quot;创建用户成功~&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//只负责注册接口,中间件处理逻辑不写在这里</span></span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,具体的处理逻辑);</span><br></pre></td></tr></table></figure><h4 id="路由中间件拆分"><a href="#路由中间件拆分" class="headerlink" title="路由中间件拆分"></a>路由中间件拆分</h4><blockquote><p>在<code>controller</code>文件夹新建<code>user.controller.js</code>，用来存放 中间件处理逻辑；</p><p>将路由中间件抽离出去；</p></blockquote><figure class="highlight js"><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">//  controller/user.controller.js</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserController</span>&#123;</span><br><span class="line">    <span class="comment">// 因为操作数据库是异步操作的,所以直接用 async 函数; async函数为对象的方法,下面直接module导出了一个对象;</span></span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx,next</span>)&#123;</span><br><span class="line">        <span class="comment">// 获取用户请求传递的参数</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">// 查询数据</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">// 返回数据</span></span><br><span class="line">        ctx.<span class="property">body</span>=<span class="string">&quot;controller success~&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>= <span class="keyword">new</span> <span class="title class_">UserController</span>(); <span class="comment">//导出的是一个对象(类的实例)</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// router/user.router.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="comment">// user.controller.js直接导出了一个实例对象,调用其方法;</span></span><br><span class="line"><span class="keyword">const</span> &#123;create&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/user.controller.js&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,create)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><blockquote><p>不难发现，即使抽离出来了中间件，<code>user.controller.js</code>异步方法里需要进行<strong>获取用户请求传递的参数，查询数据，返回数据</strong>的操作，依旧很繁琐；</p><p>故将<code>查询数据</code>的代码逻辑抽取出来，放到<code>service</code>的文件里；</p></blockquote><h4 id="路由中间件操作数据库拆分"><a href="#路由中间件操作数据库拆分" class="headerlink" title="路由中间件操作数据库拆分"></a>路由中间件操作数据库拆分</h4><blockquote><p>在<code>service</code>文件夹新建<code>user.service.js</code>，用来存放 查询数据 逻辑；</p><p>将操作数据库的逻辑抽离出去；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//  service/user.service.js</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">user</span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;user.controller传入的实参为&quot;</span>, user);</span><br><span class="line">        <span class="comment">// 将user存储到数据库中</span></span><br><span class="line">        <span class="keyword">return</span> <span class="string">&quot;service success&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// controller/user.controller.js</span></span><br><span class="line"><span class="keyword">const</span> service = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserController</span>&#123;</span><br><span class="line">    <span class="comment">// 因为操作数据库是异步操作的,所以直接用 async 函数; async函数为对象的方法,下面直接module导出了一个对象;</span></span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx,next</span>)&#123;</span><br><span class="line">        <span class="comment">// 获取用户请求传递的参数</span></span><br><span class="line">        <span class="keyword">const</span> user = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">        <span class="comment">// 查询数据</span></span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> service.<span class="title function_">create</span>(user);</span><br><span class="line">        <span class="comment">// 返回数据</span></span><br><span class="line">        ctx.<span class="property">body</span>= result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>= <span class="keyword">new</span> <span class="title class_">UserController</span>(); <span class="comment">//导出的是一个对象(类的实例)</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// router/user.router.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="comment">// user.controller.js直接导出了一个实例对象,调用其方法;</span></span><br><span class="line"><span class="keyword">const</span> &#123;create&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/user.controller.js&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,create)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/userSign11673224991635.png" alt="userSignin1"></p><blockquote><p>至此，架构已经大致划分完毕：一个接口划分了三层：<strong>router层、controller层、service层</strong>；</p></blockquote><h3 id="连接数据库"><a href="#连接数据库" class="headerlink" title="连接数据库"></a>连接数据库</h3><h4 id="安装依赖-1"><a href="#安装依赖-1" class="headerlink" title="安装依赖"></a>安装依赖</h4><ul><li>安装<code>mysql2</code>： <code>npm i mysql2</code>；</li></ul><h4 id="创建连接"><a href="#创建连接" class="headerlink" title="创建连接"></a>创建连接</h4><ul><li>创建<strong>连接池</strong>：<code>app</code>文件夹下新建<code>database.js</code>；</li></ul><blockquote><p>连接数据库的一些变量也属于<strong>配置文件</strong>，需要写到配置文件中；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// .env</span></span><br><span class="line"><span class="variable constant_">APP_PORT</span>=<span class="number">3000</span></span><br><span class="line"></span><br><span class="line"><span class="variable constant_">MYSQL_HOST</span>=localhost</span><br><span class="line"><span class="variable constant_">MYSQL_PORT</span>=<span class="number">3306</span></span><br><span class="line"><span class="variable constant_">MYSQL_DATABASE</span>=nodeHub</span><br><span class="line"><span class="variable constant_">MYSQL_USER</span>=root</span><br><span class="line"><span class="variable constant_">MYSQL_PASSWORD</span>=<span class="number">123456</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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">//  app/config.js</span></span><br><span class="line"><span class="keyword">const</span> dotenv = <span class="built_in">require</span>(<span class="string">&quot;dotenv&quot;</span>);</span><br><span class="line">dotenv.<span class="title function_">config</span>(); <span class="comment">//将.env中的变量挂载到process.env中</span></span><br><span class="line"><span class="comment">// console.log(process.env.APP_PORT);</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="variable constant_">APP_PORT</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_HOST</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_PORT</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_DATABASE</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_USER</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_PASSWORD</span>,</span><br><span class="line"></span><br><span class="line">&#125; = process.<span class="property">env</span>;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app/database.js</span></span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&quot;mysql2&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&quot;./config.js&quot;</span>);</span><br><span class="line"><span class="comment">// 1.创建连接池</span></span><br><span class="line"><span class="keyword">const</span> connectionPool = mysql.<span class="title function_">createPool</span>(&#123;</span><br><span class="line">  <span class="attr">host</span>: config.<span class="property">MYSQL_HOST</span>,</span><br><span class="line">  <span class="attr">port</span>: config.<span class="property">MYSQL_PORT</span>,</span><br><span class="line">  <span class="attr">database</span>: config.<span class="property">MYSQL_DATABASE</span>,</span><br><span class="line">  <span class="attr">user</span>: config.<span class="property">MYSQL_USER</span>,</span><br><span class="line">  <span class="attr">password</span>: config.<span class="property">MYSQL_PASSWORD</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断是否连接成功</span></span><br><span class="line">connectionPool.<span class="title function_">getConnection</span>(<span class="function">(<span class="params">err, connection</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (err) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;获取连接失败&quot;</span>, err);</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  connection.<span class="title function_">connect</span>(<span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (err) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;数据库交互失败&quot;</span> + err);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;数据库连接成功！&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// connections有promise()方法,可以直接调用;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = connectionPool.<span class="title function_">promise</span>();</span><br></pre></td></tr></table></figure><h4 id="插入数据"><a href="#插入数据" class="headerlink" title="插入数据"></a>插入数据</h4><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//  service/user.service.js</span></span><br><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">user</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> &#123;name,password&#125; = user;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`INSERT INTO users(name,password) VALUES(?,?)`</span>;</span><br><span class="line">        <span class="comment">// database.js 导出的是connections.promise();</span></span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[name,password]);</span><br><span class="line">        <span class="comment">// 将user存储到数据库中</span></span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// controller/user.controller.js</span></span><br><span class="line"><span class="keyword">const</span> service = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserController</span>&#123;</span><br><span class="line">    <span class="comment">// 因为操作数据库是异步操作的,所以直接用 async 函数; async函数为对象的方法,下面直接module导出了一个对象;</span></span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx,next</span>)&#123;</span><br><span class="line">        <span class="comment">// 获取用户请求传递的参数</span></span><br><span class="line">        <span class="keyword">const</span> user = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">        <span class="comment">// 查询数据</span></span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> service.<span class="title function_">create</span>(user);</span><br><span class="line">        <span class="comment">// 返回数据</span></span><br><span class="line">        ctx.<span class="property">body</span>= result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>= <span class="keyword">new</span> <span class="title class_">UserController</span>(); <span class="comment">//导出的是一个对象(类的实例)</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/userSign21673225049264.png" alt="userSign2"></p><p><img src="https://img.fsllala.top/database11673225109224.png" alt="database1"></p><blockquote><p>以上代码基本实现了用户注册的逻辑，但是如果用户没有传参，或者传入的参数不对，没有做处理；即没有做错误处理；</p></blockquote><h4 id="错误处理"><a href="#错误处理" class="headerlink" title="错误处理"></a>错误处理</h4><blockquote><p>那错误处理要写在什么地方呢？答案是以中间件的形式写在路由router中，并且在插入数据库中间件之前；</p><p>PS：Koa的router路由可以连续注册中间件,验证的中间件写在操作数据库的中间件之前就可以了；</p></blockquote><ul><li>在根目录(<code>package.json</code>同级)下新建<code>middleware</code>文件夹，用来存放中间件；</li><li>在<code>middleware</code>文件夹下新建<code>user.middleware.js</code>用来存放验证用户的中间件函数；</li><li>中间件为一个个单独的函数，比类使用起来会更灵活一点；所以这里不使用类；</li></ul><figure class="highlight js"><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">//  middleware/user.middleware.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">verifyUser</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * next之后才会匹配下一个符合条件的中间件；</span></span><br><span class="line"><span class="comment">     * koa的next返回的是个promise;</span></span><br><span class="line"><span class="comment">     * 因为下个中间件有异步操作,所以这里需要加await;</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    verifyUser</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// router/user.router.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="comment">// user.controller.js直接导出了一个实例对象,调用其方法;</span></span><br><span class="line"><span class="keyword">const</span> &#123;create&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/user.controller.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 中间件</span></span><br><span class="line"><span class="keyword">const</span> &#123;verifyUser&#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/user.middleware.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,verifyUser,create);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><ul><li><code>middleware/user.middleware.js</code>添加逻辑处理</li></ul><blockquote><p>在<code>middleware/user.middleware.js</code>中将错误弹出去；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// middleware/user.middleware.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">verifyUser</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 获取用户名密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 判断用户名密码不能为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&quot;用户名或密码不能为空&quot;</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 查看用户是否已经注册(未写)    </span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    verifyUser</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>在<code>app/index.js</code>监听错误</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/user.router.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorHandler = <span class="built_in">require</span>(<span class="string">&quot;./errorHandler.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听错误</span></span><br><span class="line">app.<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>,errorHandler);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><blockquote><p>在<code>app</code>文件夹下新建了一个<code>errorHandler.js</code>来做错误处理；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">errorHandler</span> = (<span class="params">error,ctx</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">//通过 message接收传过来的错误</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(error.<span class="property">message</span>);</span><br><span class="line"></span><br><span class="line">    ctx.<span class="property">status</span> = <span class="number">404</span>;</span><br><span class="line">    ctx.<span class="property">body</span> = <span class="string">&quot;发生了错误&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = errorHandler;</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/userSign31673225167528.png" alt="userSign3"></p><blockquote><p>但是错误提示语句有很多，最好<code>new Error(xx)</code>里放的是变量，到时候改一个就好了；</p></blockquote><ul><li>在根目录(<code>packagejson</code>同级目录)下新建<code>constants</code>文件夹，里面在新建<code>error-types.js</code>用来存放错误常量；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// constants/error-types.js</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span> = <span class="string">&quot;name_or_password_is_required&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// middleware/user.middleware.js</span></span><br><span class="line"><span class="keyword">const</span> &#123;<span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>&#125; = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">verifyUser</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 获取用户名密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 判断用户名密码不能为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 查看用户是否已经注册(未写)</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    verifyUser</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app/errorHandler.js</span></span><br><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">errorHandler</span> = (<span class="params">error, ctx</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// console.log(error.message);</span></span><br><span class="line">    <span class="keyword">let</span> status, message;</span><br><span class="line">    <span class="keyword">switch</span> (error.<span class="property">message</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>:</span><br><span class="line">            status = <span class="number">400</span>; <span class="comment">//Bad Request</span></span><br><span class="line">            message = <span class="string">&quot;用户名或密码不能为空&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            status = <span class="number">404</span>;</span><br><span class="line">            message = <span class="string">&quot;发生错误了~&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    ctx.<span class="property">status</span> = status;</span><br><span class="line">    ctx.<span class="property">body</span> = message;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = errorHandler;</span><br></pre></td></tr></table></figure><blockquote><p>查看用户是否已经注册的逻辑还没写，即查看用户是否存在；需要查询数据库；</p></blockquote><h4 id="查看用户是否已经注册"><a href="#查看用户是否已经注册" class="headerlink" title="查看用户是否已经注册"></a>查看用户是否已经注册</h4><blockquote><p><code>service/user.service</code>查看数据库</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// service/user.service</span></span><br><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">user</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> &#123;name,password&#125; = user;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`INSERT INTO users(name,password) VALUES(?,?)`</span>;</span><br><span class="line">        <span class="comment">// database.js 导出的是connections.promise();</span></span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[name,password]);</span><br><span class="line">        <span class="comment">// 将user存储到数据库中</span></span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">getUserByName</span>(<span class="params">name</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`SELECT * FROM users WHERE name=?`</span>;</span><br><span class="line">        <span class="comment">// database.js 导出的是connections.promise();</span></span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[name]);</span><br><span class="line">        <span class="keyword">return</span> result[<span class="number">0</span>];  <span class="comment">//返回result的话,又有很多其他信息,只有0才是我们想要的</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><blockquote><p><code>middleware/user.middleware</code>下调用查看数据库的方法；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// middleware/user.middleware</span></span><br><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;getUserByName&#125; = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">verifyUser</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 获取用户名密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 判断用户名密码不能为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 判断用户不能重复</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title function_">getUserByName</span>(name);</span><br><span class="line">    <span class="comment">// console.log(result); </span></span><br><span class="line">    <span class="keyword">if</span>(result.<span class="property">length</span>&gt;<span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">USER_IS_EXIT</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    verifyUser</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p><code>constants/error-types</code>下新添加错误变量</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// constants/error-types</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span> = <span class="string">&quot;name_or_password_is_required&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_EXIT</span>=<span class="string">&quot;user_is_exit&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>,</span><br><span class="line">    <span class="variable constant_">USER_IS_EXIT</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p><code>app/errorHandler.js</code>对新添加的变量做 错误处理；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// app/errorHandler.js</span></span><br><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">errorHandler</span> = (<span class="params">error, ctx</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// console.log(error.message);</span></span><br><span class="line">    <span class="keyword">let</span> status, message;</span><br><span class="line">    <span class="keyword">switch</span> (error.<span class="property">message</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>:</span><br><span class="line">            status = <span class="number">400</span>; <span class="comment">//Bad Request</span></span><br><span class="line">            message = <span class="string">&quot;用户名或密码不能为空&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">USER_IS_EXIT</span>:</span><br><span class="line">            status = <span class="number">409</span>; <span class="comment">//conflict</span></span><br><span class="line">            message = <span class="string">&quot;用户名已存在~&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            status = <span class="number">404</span>;</span><br><span class="line">            message = <span class="string">&quot;发生错误了~&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    ctx.<span class="property">status</span> = status;</span><br><span class="line">    ctx.<span class="property">body</span> = message;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = errorHandler;</span><br></pre></td></tr></table></figure><blockquote><p>此时，数据库保存的密码是明文的，不安全，需要进行加密处理，这里采用中间件进行密码的加密；</p></blockquote><h4 id="密码加密"><a href="#密码加密" class="headerlink" title="密码加密"></a>密码加密</h4><blockquote><p>新建一个中间件，在 验证用户是否注册 和 插入 之间进行密码的加密；</p></blockquote><ul><li><code>nodejs</code>中自带了 <code>ctypto</code>库，使用这个进行加密，但是加密的方法还需要我们自己写，不是直接调；在<code>utils</code>文件夹新建<code>password-handle</code>封装加密方法；</li></ul><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// nodejs中自带了 ctypto库，使用这个进行加密</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> crypto = <span class="built_in">require</span>(<span class="string">&quot;crypto&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">md5Password</span> = (<span class="params">password</span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">// crypto.createHash(&#x27;加密方式&#x27;)</span></span><br><span class="line">  <span class="keyword">const</span> md5 = crypto.<span class="title function_">createHash</span>(<span class="string">&quot;md5&quot;</span>); <span class="comment">//返回是是一个对象</span></span><br><span class="line">  <span class="comment">// md5.update(加密的数据).digest()==&gt;获取二进制加密的Buffer</span></span><br><span class="line">  <span class="comment">// 进postman测试,md5.update(加密的数据)这个数据必须是string,不能为number;</span></span><br><span class="line">  </span><br><span class="line">  <span class="keyword">const</span> result = md5.<span class="title function_">update</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(password)).<span class="title function_">digest</span>(<span class="string">&quot;hex&quot;</span>); <span class="comment">//获取16进制加密的字符串</span></span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = md5Password;</span><br></pre></td></tr></table></figure><ul><li>在<code>middleware</code>的<code>user.middleware</code>下封装一个处理密码加密的中间件；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;getUserByName&#125; = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> md5Password = <span class="built_in">require</span>(<span class="string">&quot;../utils/password-handle.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">verifyUser</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 获取用户名密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 判断用户名密码不能为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 判断用户不能重复</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title function_">getUserByName</span>(name);</span><br><span class="line">    <span class="comment">// console.log(result); </span></span><br><span class="line">    <span class="keyword">if</span>(result.<span class="property">length</span>&gt;<span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> userError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">USER_IS_EXIT</span>);</span><br><span class="line">        <span class="comment">// return 结束当前函数执行</span></span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,userError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 密码加密</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">handlePassword</span> = <span class="keyword">async</span> (<span class="params">ctx,next</span>)=&gt;&#123;</span><br><span class="line">    <span class="keyword">let</span> &#123;password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>; <span class="comment">//获取到未加密的</span></span><br><span class="line">    ctx.<span class="property">request</span>.<span class="property">body</span>.<span class="property">password</span>= <span class="title function_">md5Password</span>(password); <span class="comment">//将ctx.body上的密码进行加密,然后插入到数据库</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    verifyUser,</span><br><span class="line">    handlePassword,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>在<code>router</code>下的<code>user.router.js</code>中进行密码加密中间件的导入与使用；、</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="comment">// user.controller.js直接导出了一个实例对象,调用其方法;</span></span><br><span class="line"><span class="keyword">const</span> &#123;create&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/user.controller.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 中间件</span></span><br><span class="line"><span class="keyword">const</span> &#123;verifyUser,handlePassword&#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/user.middleware.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/users&quot;</span>&#125;);</span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,verifyUser,handlePassword,create);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><blockquote><p>注！！！这里在<code>postman</code>测试的时候,密码为数字的时候，会报错。可能是<code>postman</code>的原因，key和value都需要双引号包裹；</p></blockquote><p><img src="https://img.fsllala.top/userSing41673225214071.png" alt="userSing4"></p><h2 id="用户登录接口"><a href="#用户登录接口" class="headerlink" title="用户登录接口"></a>用户登录接口</h2><blockquote><p>写接口的思想是：一开始没有任何限制，然后一点点的往里面添加中间件，来进行限制。这样才好写，而不是一下子就能想那么多；</p></blockquote><h3 id="登录逻辑结构搭建"><a href="#登录逻辑结构搭建" class="headerlink" title="登录逻辑结构搭建"></a>登录逻辑结构搭建</h3><ul><li><code>router</code>文件夹下新建<code>auth.router.js</code>，用来存放登录的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;login&#125; =<span class="built_in">require</span>(<span class="string">&quot;../controller/auth.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/login&quot;</span>&#125;);</span><br><span class="line">authRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,login);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=authRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下新建<code>auth.controller.js</code>，用来存放中间件的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">AuthController</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">login</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> &#123;name&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">        ctx.<span class="property">body</span> = <span class="string">`欢迎<span class="subst">$&#123;name&#125;</span>回来~`</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">AuthController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>app</code>文件夹下的<code>index.js</code>中，将路由进行引入与注册；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/user.router.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/auth.router.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorHandler = <span class="built_in">require</span>(<span class="string">&quot;./errorHandler.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(authRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(authRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听错误</span></span><br><span class="line">app.<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>,errorHandler);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><ul><li><code>postman</code>进行测试</li></ul><p><img src="https://img.fsllala.top/userLogin11673225250527.png" alt="userLogin1"></p><blockquote><p>壳子套好了，但是现在是个用户就能登录。需要添加登录条件，登录的时候判断用户是否存在，判断用户和密码输入的是否正确。。。</p></blockquote><h3 id="登录条件"><a href="#登录条件" class="headerlink" title="登录条件"></a>登录条件</h3><blockquote><p>通过中间件的方式来写入限制条件</p></blockquote><ul><li>在<code>middleware</code>下新建<code>auth.middleware.js</code>，用来做登录的限制；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;getUserByName&#125; = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> md5Password = <span class="built_in">require</span>(<span class="string">&quot;../utils/password-handle.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">vertifyLogin</span> = <span class="keyword">async</span>(<span class="params">ctx,next</span>)=&gt;&#123;</span><br><span class="line">    <span class="comment">// 1.获取用户名和密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 2.判断用户名或密码是否为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 3.判断用户名是否存在</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title function_">getUserByName</span>(name);</span><br><span class="line">    <span class="keyword">let</span> user = result[<span class="number">0</span>];</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(user);</span><br><span class="line">    <span class="keyword">if</span>(!user)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">USER_IS_NOT_EXIT</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 4.验证密码是否和数据库中的密码一致(加密)</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="title function_">md5Password</span>(password)!==user.<span class="property">password</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">PASSWORD_IS_INCORRENT</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    vertifyLogin,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><code>router</code>的<code>auth.router.js</code>引入中间件；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;login&#125; =<span class="built_in">require</span>(<span class="string">&quot;../controller/auth.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;vertifyLogin&#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123;<span class="attr">prefix</span>:<span class="string">&quot;/login&quot;</span>&#125;);</span><br><span class="line">authRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,vertifyLogin,login);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=authRouter;</span><br></pre></td></tr></table></figure><ul><li>中间件错误变量，放在在错误变量<code>constants</code>文件夹下的<code>error-types.js</code>里；(<code>app/index.js</code>监听错误处理，这里登录接口写了，不需要更改)；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span> = <span class="string">&quot;name_or_password_is_required&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_EXIT</span>=<span class="string">&quot;user_is_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_NOT_EXIT</span>=<span class="string">&quot;user_is_not_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PASSWORD_IS_INCORRENT</span>=<span class="string">&quot;password_id_incorrent&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>,</span><br><span class="line">    <span class="variable constant_">USER_IS_EXIT</span>,</span><br><span class="line">    <span class="variable constant_">USER_IS_NOT_EXIT</span>,</span><br><span class="line">    <span class="variable constant_">PASSWORD_IS_INCORRENT</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><code>app</code>文件夹下的<code>errorHandler.js</code>下做变量的错误处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">errorHandler</span> = (<span class="params">error, ctx</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// console.log(error.message);</span></span><br><span class="line">    <span class="keyword">let</span> status, message;</span><br><span class="line">    <span class="keyword">switch</span> (error.<span class="property">message</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>:</span><br><span class="line">            status = <span class="number">400</span>; <span class="comment">//Bad Request</span></span><br><span class="line">            message = <span class="string">&quot;用户名或密码不能为空&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">USER_IS_EXIT</span>:</span><br><span class="line">            status = <span class="number">409</span>; <span class="comment">//conflict</span></span><br><span class="line">            message = <span class="string">&quot;用户名已存在~&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">USER_IS_NOT_EXIT</span>:</span><br><span class="line">            status = <span class="number">400</span>; <span class="comment">//请求参数错误</span></span><br><span class="line">            message = <span class="string">&quot;用户不存在&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> errorType.<span class="property">PASSWORD_IS_INCORRENT</span>:</span><br><span class="line">            status = <span class="number">400</span>; <span class="comment">//请求参数错误</span></span><br><span class="line">            message = <span class="string">&quot;用户名或密码错误&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            status = <span class="number">404</span>;</span><br><span class="line">            message = <span class="string">&quot;发生错误了~&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    ctx.<span class="property">status</span> = status;</span><br><span class="line">    ctx.<span class="property">body</span> = message;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = errorHandler;</span><br></pre></td></tr></table></figure><ul><li><code>postman</code>进行测试~</li></ul><h3 id="简化路由注册"><a href="#简化路由注册" class="headerlink" title="简化路由注册"></a>简化路由注册</h3><blockquote><p>现在注册了两个路由，<code>app/index.js</code>代码为：</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/user.router.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="built_in">require</span>(<span class="string">&quot;../router/auth.router.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorHandler = <span class="built_in">require</span>(<span class="string">&quot;./errorHandler.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(userRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(authRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(authRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听错误</span></span><br><span class="line">app.<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>,errorHandler);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><ul><li>在<code>router</code>文件夹下新建<code>index.js</code>；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">useRoutes</span> = (<span class="params">app</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// fs.readdirSync返回的是个数组;</span></span><br><span class="line">    fs.<span class="title function_">readdirSync</span>(__dirname).<span class="title function_">forEach</span>(<span class="function"><span class="params">file</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (file == <span class="string">&quot;index.js&quot;</span>) <span class="keyword">return</span>;</span><br><span class="line">        <span class="keyword">const</span> router = <span class="built_in">require</span>(<span class="string">`./<span class="subst">$&#123;file&#125;</span>`</span>);</span><br><span class="line">        app.<span class="title function_">use</span>(router.<span class="title function_">routes</span>());</span><br><span class="line">        app.<span class="title function_">use</span>(router.<span class="title function_">allowedMethods</span>());</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=useRoutes;</span><br></pre></td></tr></table></figure><ul><li>在<code>app</code>文件夹下<code>index.js</code>中进行引入；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="comment">// const userRouter = require(&quot;../router/user.router.js&quot;);</span></span><br><span class="line"><span class="comment">// const authRouter = require(&quot;../router/auth.router.js&quot;);</span></span><br><span class="line"><span class="keyword">const</span> useRoutes = <span class="built_in">require</span>(<span class="string">&quot;../router/index.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorHandler = <span class="built_in">require</span>(<span class="string">&quot;./errorHandler.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册body-parser</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line"><span class="title function_">useRoutes</span>(app); <span class="comment">//传参app参数</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听错误</span></span><br><span class="line">app.<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>,errorHandler);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=app;</span><br></pre></td></tr></table></figure><h3 id="登录凭证"><a href="#登录凭证" class="headerlink" title="登录凭证"></a>登录凭证</h3><blockquote><p>登录成功返回凭证：<code>cookie+session</code>或者是<code>Token令牌</code>；现在基本都是<code>Token令牌</code>作为登录凭证；</p></blockquote><h4 id="为什么需要登录凭证呢？"><a href="#为什么需要登录凭证呢？" class="headerlink" title="为什么需要登录凭证呢？"></a>为什么需要登录凭证呢？</h4><blockquote><p>web开发中，我们使用最多的协议是<code>http</code>，但是<code>http</code>是一个<strong>无状态</strong>的协议。那什么叫做无状态协议呢？</p></blockquote><ul><li>举个例子：<ul><li>我们登录了一个网站 <a href="http://www.fsllala.top;/">www.fsllala.top；</a></li><li>登录的时候我们需要输入用户名和密码：比如用户名<code>forward</code>，密码：<code>Forward666</code>;</li><li>登录成功之后，我们要以<code>forward</code>的身份去访问其他的数据和资源，还是通过<code>http</code>请求去访问。<ul><li>fsllala的服务器会问：你谁呀？</li><li>forward说：我是forward呀，刚刚登录过呀；</li><li>fsllala：怎么证明你刚刚登录过呀？</li><li>forward说：这。。。，http没有告诉你吗？</li><li>fsllala：http的每次请求对我来说都是一个单独的请求，和之前请求过什么没有关系。</li></ul></li></ul></li></ul><p><img src="https://img.fsllala.top/1673224477117cookie.png"></p><p><img src="https://img.fsllala.top/1673224528691cookie.png"></p><blockquote><p>看到了吧？这就是http的无状态，也就是服务器不知道你上一步做了什么，我们必须得有一个办法可以证明我们登录过；</p></blockquote><ul><li>那如何证明刚才就是我登录的啊？<ul><li>登陆成功的时候服务器给我们发过来一个<strong>登录凭证</strong>，访问其他资源的时候，通过这个<strong>登录凭证</strong>来证明刚才就是我登录的，而且我能访问哪些资源，不能访问哪些资源，都可以通过<strong>登录凭证</strong>来决定；</li></ul></li></ul><p><img src="https://img.fsllala.top/1673224500212cookie.png"></p><ul><li>目前登录凭证有两种：<ul><li><code>cookie+session</code>(逐渐淘汰)</li><li><code>Token</code>令牌</li></ul></li></ul><p><strong>详细文章，参考 <a href="https://fsllala.top/articles/5fc41a6b">NodeJs 登录凭证</a></strong></p><h3 id="JWT颁发签名"><a href="#JWT颁发签名" class="headerlink" title="JWT颁发签名"></a>JWT颁发签名</h3><ul><li>我们在<code>vertifyLogin</code>中间件中查询到了用户数据，我们需要将用户的<code>id</code>、<code>name</code>和<code>生成的token</code>返回给用户；所以可以在<code>vertifyLogin</code>中间件中，将用户的数据绑定在<code>ctx</code>中(类似于原型)；最后在<code>login</code>中间件即<code>controller</code>里面获取用户数据，进行<code>token生成</code>和数据的返回；</li><li>采用<code>非对称加密</code>，将生成的<code>私钥</code>和<code>公钥</code>放到<code>app</code>文件夹下(公共的数据)；</li></ul><ol><li><code>middleware</code>文件夹下，将从<code>数据库</code>中获取到的<code>user</code>绑定在<code>ctx</code>对象上,用于<code>controller</code>获取用户数据；</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">将user绑定在ctx对象上,用于controller获取用户数据</span><br><span class="line">ctx.<span class="property">user</span>=user;</span><br></pre></td></tr></table></figure><blockquote><p><code>middleware/auth.middleware.js</code>完整代码：</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;getUserByName&#125; = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> md5Password = <span class="built_in">require</span>(<span class="string">&quot;../utils/password-handle.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">vertifyLogin</span> = <span class="keyword">async</span>(<span class="params">ctx,next</span>)=&gt;&#123;</span><br><span class="line">    <span class="comment">// 1.获取用户名和密码</span></span><br><span class="line">    <span class="keyword">const</span> &#123;name,password&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 2.判断用户名或密码是否为空</span></span><br><span class="line">    <span class="keyword">if</span>(!name||!password)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">NAME_OR_PASSWORD_IS_REQUIRED</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 3.判断用户名是否存在</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title function_">getUserByName</span>(name);</span><br><span class="line">    <span class="keyword">let</span> user = result[<span class="number">0</span>];</span><br><span class="line">    <span class="comment">// console.log(user);</span></span><br><span class="line">    <span class="keyword">if</span>(!user)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">USER_IS_NOT_EXIT</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 4.验证密码是否和数据库中的密码一致(加密)</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="title function_">md5Password</span>(password)!==user.<span class="property">password</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> loginError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">PASSWORD_IS_INCORRENT</span>);</span><br><span class="line">        <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>,loginError,ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 5.将user绑定在ctx对象上,用于controller获取用户数据</span></span><br><span class="line">    ctx.<span class="property">user</span>=user;</span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    vertifyLogin,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li><code>app</code>下的<code>config.js</code>读取<code>key</code>并导出；</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> dotenv = <span class="built_in">require</span>(<span class="string">&quot;dotenv&quot;</span>);</span><br><span class="line">dotenv.<span class="title function_">config</span>(); <span class="comment">//将.env中的变量挂载到process.env中</span></span><br><span class="line"><span class="comment">// console.log(process.env.APP_PORT);</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PRIVATE_KEY</span> = fs.<span class="title function_">readFileSync</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;./keys/private.key&quot;</span>));</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PUBLIC_KEY</span> = fs.<span class="title function_">readFileSync</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;./keys/public.key&quot;</span>));</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="variable constant_">APP_PORT</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_HOST</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_PORT</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_DATABASE</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_USER</span>,</span><br><span class="line">    <span class="variable constant_">MYSQL_PASSWORD</span>,</span><br><span class="line"></span><br><span class="line">&#125; = process.<span class="property">env</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里不能写在module.exports上面,原因可参考模块化规范一文；</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">PRIVATE_KEY</span> = <span class="variable constant_">PRIVATE_KEY</span>;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">PUBLIC_KEY</span> = <span class="variable constant_">PUBLIC_KEY</span>;</span><br></pre></td></tr></table></figure><ol start="3"><li>安装<code>jsonwebtoken</code></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i jsonwebtoken</span><br></pre></td></tr></table></figure><ol start="4"><li>在<code>controller</code>下的<code>auth.controller.js</code>中做<code>token</code>的返回；</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;<span class="variable constant_">PRIVATE_KEY</span>&#125; = <span class="built_in">require</span>(<span class="string">&quot;../app/config.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">AuthController</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">login</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">        <span class="comment">// const &#123;name&#125; = ctx.request.body;</span></span><br><span class="line">        <span class="comment">// ctx.body = `欢迎$&#123;name&#125;回来~`;</span></span><br><span class="line">        <span class="keyword">const</span> &#123;id,name&#125;=ctx.<span class="property">user</span>;</span><br><span class="line">        <span class="keyword">const</span> token = jwt.<span class="title function_">sign</span>(&#123;id,name&#125;,<span class="variable constant_">PRIVATE_KEY</span>,&#123;</span><br><span class="line">            <span class="attr">expiresIn</span>:<span class="number">60</span>*<span class="number">60</span>*<span class="number">24</span>,</span><br><span class="line">            <span class="attr">algorithm</span>:<span class="string">&quot;RS256&quot;</span></span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="comment">//返回对象形式的数据(ES6简写)</span></span><br><span class="line">        ctx.<span class="property">body</span>=&#123;</span><br><span class="line">            id,</span><br><span class="line">            name,</span><br><span class="line">            token</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">AuthController</span>();</span><br></pre></td></tr></table></figure><ol start="5"><li>使用<code>postman</code>进行测试；(填入数据库存在的用户)；</li></ol><p><img src="https://img.fsllala.top/token81673958231583.png"></p><ol start="6"><li>设计个简单的接口，验证上面写的登录接口；（这一步实际项目不用做，做的话看下一步骤7）</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在controller下的auth.controller.js下</span></span><br><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; <span class="variable constant_">PRIVATE_KEY</span>, <span class="variable constant_">PUBLIC_KEY</span> &#125; = <span class="built_in">require</span>(<span class="string">&quot;../app/config.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">AuthController</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">login</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 验证token</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">vertifyToken</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> authorization = ctx.<span class="property">headers</span>.<span class="property">authorization</span>;</span><br><span class="line">    <span class="comment">// 此时的token多一个&quot;Bearer &quot;,去掉;</span></span><br><span class="line">    <span class="keyword">const</span> token = authorization.<span class="title function_">replace</span>(<span class="string">&quot;Bearer &quot;</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">    <span class="comment">// 认证token 通过 jwt.verify(token,key); 使用公钥进行解密,并告诉其加密算法;</span></span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> result = jwt.<span class="title function_">verify</span>(token, <span class="variable constant_">PUBLIC_KEY</span>, &#123;</span><br><span class="line">        <span class="attr">algorithms</span>: [<span class="string">&quot;RS256&quot;</span>], <span class="comment">//这里algorithms是个复数,所以需要传入数组;</span></span><br><span class="line">      &#125;);</span><br><span class="line">      ctx.<span class="property">body</span> = result;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">      <span class="keyword">const</span> tokenError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">UNAUTHORIZATION</span>);</span><br><span class="line">      <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>, tokenError, ctx);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">AuthController</span>();</span><br></pre></td></tr></table></figure><figure class="highlight js"><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">// 在constants下的error-types.js下</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span> = <span class="string">&quot;name_or_password_is_required&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_EXIT</span> = <span class="string">&quot;user_is_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_NOT_EXIT</span> = <span class="string">&quot;user_is_not_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PASSWORD_IS_INCORRENT</span> = <span class="string">&quot;password_is_incorrent&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">UNAUTHORIZATION</span> = <span class="string">&quot;unauthorization&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>,</span><br><span class="line">  <span class="variable constant_">USER_IS_EXIT</span>,</span><br><span class="line">  <span class="variable constant_">USER_IS_NOT_EXIT</span>,</span><br><span class="line">  <span class="variable constant_">PASSWORD_IS_INCORRENT</span>,</span><br><span class="line">  <span class="variable constant_">UNAUTHORIZATION</span>,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在app下的errorHandler.js下</span></span><br><span class="line">  <span class="keyword">case</span> errorType.<span class="property">UNAUTHORIZATION</span>:</span><br><span class="line">    status = <span class="number">401</span>; </span><br><span class="line">    message = <span class="string">&quot;无效的token~&quot;</span>;</span><br><span class="line">    <span class="keyword">break</span>;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在router下的auth.router.js下</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyLogin &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; login,vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/auth.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/login&quot;</span> &#125;);</span><br><span class="line">authRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyLogin, login);</span><br><span class="line">authRouter.<span class="title function_">get</span>(<span class="string">&quot;/&quot;</span>, vertifyToken);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = authRouter;</span><br></pre></td></tr></table></figure><p>使用postman，填入token，进行测试<code>&#123;&#123;baseUrl&#125;&#125;/login</code>；</p><ol start="7"><li>实际项目中，几乎每个接口都需要验证token，所以需要将6中的验证token的逻辑提取到中间件中；以后别的接口需要验证token的话，直接引入这个验证token的中间件就行。</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在middleware的auth.middleware.js下</span></span><br><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; getUserByName &#125; = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> md5Password = <span class="built_in">require</span>(<span class="string">&quot;../utils/password-handle.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; <span class="variable constant_">PUBLIC_KEY</span> &#125; = <span class="built_in">require</span>(<span class="string">&quot;../app/config.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">vertifyLogin</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 验证token是否有效</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">vertifyToken</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> authorization = ctx.<span class="property">headers</span>.<span class="property">authorization</span>;</span><br><span class="line">  <span class="comment">// 验证是否携带TOKEN</span></span><br><span class="line">  <span class="keyword">if</span>(!authorization)&#123;</span><br><span class="line">    <span class="keyword">const</span> tokenError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">UNAUTHORIZATION</span>);</span><br><span class="line">    <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>, tokenError, ctx);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 此时的token多一个&quot;Bearer &quot;,去掉;</span></span><br><span class="line">  <span class="keyword">const</span> token = authorization.<span class="title function_">replace</span>(<span class="string">&quot;Bearer &quot;</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">  <span class="comment">// 认证token 通过 jwt.verify(token,key); 使用公钥进行解密,并告诉其加密算法;</span></span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="comment">// 获取到token中信息(id.name...)</span></span><br><span class="line">    <span class="keyword">const</span> result = jwt.<span class="title function_">verify</span>(token, <span class="variable constant_">PUBLIC_KEY</span>, &#123;</span><br><span class="line">      <span class="attr">algorithms</span>: [<span class="string">&quot;RS256&quot;</span>], <span class="comment">//这里algorithms是个复数,所以需要传入数组;</span></span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="comment">// 将token信息保留下来,以便后续使用</span></span><br><span class="line">    ctx.<span class="property">userInfo</span> = result;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 执行下一个中间件;</span></span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">  &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">    <span class="keyword">const</span> tokenError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">UNAUTHORIZATION</span>);</span><br><span class="line">    <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>, tokenError, ctx);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  vertifyLogin,</span><br><span class="line">  vertifyToken</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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">// 在constants下的error-types.js下</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span> = <span class="string">&quot;name_or_password_is_required&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_EXIT</span> = <span class="string">&quot;user_is_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">USER_IS_NOT_EXIT</span> = <span class="string">&quot;user_is_not_exit&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PASSWORD_IS_INCORRENT</span> = <span class="string">&quot;password_is_incorrent&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">UNAUTHORIZATION</span> = <span class="string">&quot;unauthorization&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="variable constant_">NAME_OR_PASSWORD_IS_REQUIRED</span>,</span><br><span class="line">  <span class="variable constant_">USER_IS_EXIT</span>,</span><br><span class="line">  <span class="variable constant_">USER_IS_NOT_EXIT</span>,</span><br><span class="line">  <span class="variable constant_">PASSWORD_IS_INCORRENT</span>,</span><br><span class="line">  <span class="variable constant_">UNAUTHORIZATION</span>,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在app下的errorHandler.js下</span></span><br><span class="line">  <span class="keyword">case</span> errorType.<span class="property">UNAUTHORIZATION</span>:</span><br><span class="line">    status = <span class="number">401</span>; </span><br><span class="line">    message = <span class="string">&quot;无效的token~&quot;</span>;</span><br><span class="line">    <span class="keyword">break</span>;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在router下的auth.router.js下</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyLogin,vertifyToken&#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; login &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/auth.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> authRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/login&quot;</span> &#125;);</span><br><span class="line">authRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyLogin, login);</span><br><span class="line">authRouter.<span class="title function_">get</span>(<span class="string">&quot;/&quot;</span>, vertifyToken);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = authRouter;</span><br></pre></td></tr></table></figure><p>使用postman，填入token，进行测试<code>&#123;&#123;baseUrl&#125;&#125;/login</code>；</p><h2 id="动态信息接口-一对多"><a href="#动态信息接口-一对多" class="headerlink" title="动态信息接口(一对多)"></a>动态信息接口(一对多)</h2><blockquote><p>设计表字段思路：谁，发表了什么动态信息；</p><p>一条动态(含唯一id)，只能是一个用户发布的；一个用户，可以发表多条动态信息(含唯一id)；</p><p>属于”一对多”关系型数据库表；</p></blockquote><h3 id="数据库表"><a href="#数据库表" class="headerlink" title="数据库表"></a>数据库表</h3><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `moment`(</span><br><span class="line"> id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line"> content <span class="type">VARCHAR</span>(<span class="number">1000</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"> user_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"> ctrateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> updateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span> <span class="keyword">ON</span> <span class="keyword">UPDATE</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> <span class="keyword">FOREIGN</span> KEY(user_id) <span class="keyword">REFERENCES</span> <span class="keyword">user</span>(id)</span><br><span class="line">)</span><br></pre></td></tr></table></figure><h3 id="发表动态"><a href="#发表动态" class="headerlink" title="发表动态"></a>发表动态</h3><ul><li><code>router</code>文件夹下新建<code>moment.router.js</code>，用来存放用户动态的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在简化路由注册中,实现了路由的自动引入;因此,不需要手动引入路由;</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; postUpdates &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/moment.controller&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> momentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/moment&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 发表动态(登录之后才能,引入验证token的中间件)</span></span><br><span class="line">momentRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyToken, postUpdates);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = momentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下新建<code>moment.controller.js</code>，用来存放中间件的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 啥逻辑也不写,进行简单的接口验证</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">MomentController</span> &#123;</span><br><span class="line">    <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">postUpdates</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    ctx.<span class="property">body</span>=<span class="string">&quot;发表动态成功~&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">MomentController</span>();</span><br></pre></td></tr></table></figure><figure class="highlight js"><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">// 进行逻辑的处理</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">MomentController</span> &#123;</span><br><span class="line">    <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">postUpdates</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 1.获取动态的内容;</span></span><br><span class="line">    <span class="keyword">const</span> &#123;content&#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 2.动态是谁发布的(谁登录就是谁发布的,登录的时候再ctx上绑定了user属性);</span></span><br><span class="line">    <span class="keyword">const</span> &#123;id&#125; = ctx.<span class="property">user</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">MomentController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下新建<code>moment.service.js</code>，用来存放中间件的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 可能插入失败,需要修改数据表content字符集为 utf8;</span></span><br><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">contents,userId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO moment(content,user_id) VALUES(?,?)`</span>;</span><br><span class="line">    <span class="comment">// 返回的是一个[&#123;&#125;]格式的数据,lenth为1;采用数组结构,获取[]中的&#123;&#125;;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[contents,userId]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// moment.controller.js</span></span><br><span class="line"><span class="keyword">const</span> momentService = <span class="built_in">require</span>(<span class="string">&quot;../service/moment.service&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">MomentController</span> &#123;</span><br><span class="line">  <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">postUpdates</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 1.获取动态的内容;</span></span><br><span class="line">    <span class="keyword">const</span> &#123; content &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 2.动态是谁发布的(谁登录就是谁发布的,验证token的时候再ctx上绑定了userInfo属性);</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">create</span>(content, id);</span><br><span class="line">    <span class="comment">// 4.返回数据</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;发布动态成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">MomentController</span>();</span><br></pre></td></tr></table></figure><h3 id="查询动态列表"><a href="#查询动态列表" class="headerlink" title="查询动态列表"></a>查询动态列表</h3><blockquote><p>查询一般涉及到了分页的处理。</p></blockquote><ul><li><code>router</code>文件夹下的<code>moment.router.js</code>，新增查询用户动态的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; postUpdates,list &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/moment.controller&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> momentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/moment&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 发表动态(登录之后才能,引入验证token的中间件)</span></span><br><span class="line">momentRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyToken, postUpdates);</span><br><span class="line"><span class="comment">// 查询动态(这个不登录也能看动态的)</span></span><br><span class="line">momentRouter.<span class="title function_">get</span>(<span class="string">&quot;/list&quot;</span>, list);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = momentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>moment.controller.js</code>，新增查询中间件的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> momentService = <span class="built_in">require</span>(<span class="string">&quot;../service/moment.service&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">MomentController</span> &#123;</span><br><span class="line">  <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">postUpdates</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 1.获取动态的内容;</span></span><br><span class="line">    <span class="keyword">const</span> &#123; content &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 2.动态是谁发布的(谁登录就是谁发布的,验证token的时候再ctx上绑定了userInfo属性);</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">create</span>(content, id);</span><br><span class="line">    <span class="comment">// 4.返回数据</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;发布动态成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 查询动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">list</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 获取 size与offset</span></span><br><span class="line">    <span class="keyword">const</span> &#123; size,offset &#125; = ctx.<span class="property">query</span>;</span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">queryList</span>(size,offset);</span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;查询动态成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">MomentController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>moment.service.js</code>，新增查询中间件的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="comment">// 专门做数据库操作的;</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">contents,userId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO moment(content,user_id) VALUES(?,?)`</span>;</span><br><span class="line">    <span class="comment">// 返回的是一个[&#123;&#125;]格式的数据,lenth为1;采用数组结构,获取[]中的&#123;&#125;;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[contents,userId]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 查询数据列表</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">queryList</span>(<span class="params">size,offset</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`SELECT * FROM moment LIMIT ? OFFSET ?`</span>;</span><br><span class="line">    <span class="comment">// 这里如果写成String()的话,如果用户不传size,offset,接口也能通;如果是Number的话,会报错;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[<span class="title class_">String</span>(size),<span class="title class_">String</span>(offset)]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><blockquote><p>访问<code>moment/list?size=10&amp;offset=0</code>，进行动态列表数据的分页查询。</p></blockquote><p>但是现在返回的数据，其实仅仅是当前的<code>moment</code>数据表中的数据，不能知道是谁评论的，需要用外键<code>user_id</code>与<code>user</code>表关联起来；</p><p><img src="https://img.fsllala.top/koa_momentList1.png"></p><ul><li>多表查询</li></ul><figure class="highlight sql"><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"><span class="operator">/</span><span class="operator">/</span> 基础写法(没有数据格式处理,字段没有过滤)</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> moment </span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `<span class="keyword">user</span>` <span class="keyword">ON</span> user.id<span class="operator">=</span>moment.user_id</span><br><span class="line">LIMIT <span class="number">10</span> <span class="keyword">OFFSET</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="operator">/</span><span class="operator">/</span> 进阶</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">m.id <span class="keyword">as</span> id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span><br><span class="line"><span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,u.id,<span class="string">&#x27;name&#x27;</span>,u.name) <span class="keyword">as</span> userInfo</span><br><span class="line"><span class="keyword">FROM</span> moment <span class="keyword">as</span> m</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `<span class="keyword">user</span>` <span class="keyword">as</span> u <span class="keyword">ON</span> u.id<span class="operator">=</span>m.user_id</span><br><span class="line">LIMIT <span class="number">10</span> <span class="keyword">OFFSET</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/koa_momentList2.png"></p><ul><li><code>service</code>文件夹下的<code>moment.service.js</code>，修改查询SQL语句；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="comment">// 专门做数据库操作的;</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">contents,userId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO moment(content,user_id) VALUES(?,?)`</span>;</span><br><span class="line">    <span class="comment">// 返回的是一个[&#123;&#125;]格式的数据,lenth为1;采用数组结构,获取[]中的&#123;&#125;;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[contents,userId]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 查询数据列表</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">queryList</span>(<span class="params">size,offset</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`SELECT </span></span><br><span class="line"><span class="string">    m.id as id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span></span><br><span class="line"><span class="string">    JSON_OBJECT(&#x27;id&#x27;,u.id,&#x27;name&#x27;,u.name) as userInfo</span></span><br><span class="line"><span class="string">    FROM moment as m</span></span><br><span class="line"><span class="string">    LEFT JOIN user as u ON u.id=m.user_id</span></span><br><span class="line"><span class="string">    LIMIT ? OFFSET ?`</span>;</span><br><span class="line">    <span class="comment">// 这里如果写成String()的话,如果用户不传size,offset,接口也能通;如果是Number的话,会报错;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[<span class="title class_">String</span>(size),<span class="title class_">String</span>(offset)]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><blockquote><p>访问<code>moment/list?size=10&amp;offset=0</code>，进行动态列表数据的分页查询，查询结果如下图所示</p></blockquote><p><img src="https://img.fsllala.top/koa_momentList3.png"></p><h3 id="查询动态详情"><a href="#查询动态详情" class="headerlink" title="查询动态详情"></a>查询动态详情</h3><blockquote><p>获取列表某一条数据的详情。</p></blockquote><ul><li><code>router</code>文件夹下的<code>moment.router.js</code>，新增查询用户动态详情接口；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; postUpdates,list,detail&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/moment.controller&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> momentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/moment&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 发表动态(登录之后才能,引入验证token的中间件)</span></span><br><span class="line">momentRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyToken, postUpdates);</span><br><span class="line"><span class="comment">// 查询动态(这个不登录也能看动态的)</span></span><br><span class="line">momentRouter.<span class="title function_">get</span>(<span class="string">&quot;/list&quot;</span>, list);</span><br><span class="line"><span class="comment">// 查询动态详情</span></span><br><span class="line">momentRouter.<span class="title function_">get</span>(<span class="string">&quot;/:momentId&quot;</span>, detail);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = momentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>moment.controller.js</code>，新增查询中间件的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 查询动态详情</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">detail</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; momentId &#125; = ctx.<span class="property">params</span>;</span><br><span class="line">  <span class="comment">// console.log(momentId);</span></span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">queryDetailById</span>(momentId);</span><br><span class="line">  ctx.<span class="property">body</span> = &#123;</span><br><span class="line">    <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&quot;查询动态详情成功&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: result,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>moment.service.js</code>，新增查询中间件的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="comment">// 专门做数据库操作的;</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">contents,userId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO moment(content,user_id) VALUES(?,?)`</span>;</span><br><span class="line">    <span class="comment">// 返回的是一个[&#123;&#125;]格式的数据,lenth为1;采用数组结构,获取[]中的&#123;&#125;;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[contents,userId]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 查询数据列表</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">queryList</span>(<span class="params">size,offset</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`SELECT </span></span><br><span class="line"><span class="string">    m.id as id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span></span><br><span class="line"><span class="string">    JSON_OBJECT(&#x27;id&#x27;,u.id,&#x27;name&#x27;,u.name) as userInfo</span></span><br><span class="line"><span class="string">    FROM moment as m</span></span><br><span class="line"><span class="string">    LEFT JOIN user as u ON u.id=m.user_id</span></span><br><span class="line"><span class="string">    LIMIT ? OFFSET ?`</span>;</span><br><span class="line">    <span class="comment">// 这里如果写成String()的话,如果用户不传size,offset,接口也能通;如果是Number的话,会报错;</span></span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[<span class="title class_">String</span>(size),<span class="title class_">String</span>(offset)]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 查询动态详情(将&#x27;查询数据列表&#x27;的LIMIT...ON...改为WHERE...即可)</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">queryDetailById</span>(<span class="params">momentId</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`SELECT </span></span><br><span class="line"><span class="string">    m.id as id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span></span><br><span class="line"><span class="string">    JSON_OBJECT(&#x27;id&#x27;,u.id,&#x27;name&#x27;,u.name) as userInfo</span></span><br><span class="line"><span class="string">    FROM moment as m</span></span><br><span class="line"><span class="string">    LEFT JOIN user as u ON u.id=m.user_id</span></span><br><span class="line"><span class="string">    WHERE m.id=?`</span>;</span><br><span class="line">    <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[momentId]);</span><br><span class="line">    <span class="keyword">return</span> serviceResult;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><blockquote><p>通过<code>/moment/1</code>(GET)获取详情数据。</p></blockquote><h3 id="修改动态"><a href="#修改动态" class="headerlink" title="修改动态"></a>修改动态</h3><blockquote><p>修改列表某一条数据的详情。</p></blockquote><ul><li><code>router</code>文件夹下的<code>moment.router.js</code>，新增修改用户动态接口；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">momentRouter.<span class="title function_">patch</span>(<span class="string">&quot;/:momentId&quot;</span>, vertifyToken, update);</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>moment.controller.js</code>，新增修改用户的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 修改动态</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">update</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; momentId &#125; = ctx.<span class="property">params</span>;</span><br><span class="line">  <span class="keyword">const</span> &#123; content &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">updateById</span>(content, momentId);</span><br><span class="line">  ctx.<span class="property">body</span> = &#123;</span><br><span class="line">    <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&quot;修改动态成功&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: result,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>moment.service.js</code>，新增修改用户的SQL操作；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 修改动态</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">updateById</span>(<span class="params">content,momentId</span>)&#123;</span><br><span class="line">  <span class="keyword">const</span> statement = <span class="string">`UPDATE moment SET content=? WHERE id=?`</span>;</span><br><span class="line">  <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[content,momentId]);</span><br><span class="line">  <span class="keyword">return</span> serviceResult;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>通过<code>/moment/1</code>(PATCH)修改详情数据。</p></blockquote><p>但是现在只要<code>token</code>有效，所有人的动态信息都能修改；正常来说，只能修改私人的动态，即：用户登录的id和数据库表中发表此动态的id一致可以修改，否则不能修改；</p><ul><li>增加验证修改权限的中间件</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="operator">/</span><span class="operator">/</span> 此<span class="keyword">SQL</span>语句包含了查询的ID与用户的ID;如果筛选条件都满足的话返回一条数据,否则为空;</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> moment <span class="keyword">WHERE</span> id<span class="operator">=</span><span class="number">1</span> <span class="keyword">AND</span> user_id <span class="operator">=</span><span class="number">1</span></span><br></pre></td></tr></table></figure><ul><li><code>router</code>文件夹下的<code>moment.router.js</code>，新增修改用户动态权限的验证；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;vertifyMomentPermission&#125;= <span class="built_in">require</span>(<span class="string">&quot;../middleware/permission.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; postUpdates,list,detail,update&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/moment.controller&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> momentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/moment&quot;</span> &#125;);</span><br><span class="line"><span class="comment">// 修改动态(登录之后才能,引入验证token的中间件)</span></span><br><span class="line"><span class="comment">// 用户登录的id和数据库表中发表此动态的id一致可以修改，否则不能修改</span></span><br><span class="line">momentRouter.<span class="title function_">patch</span>(<span class="string">&quot;/:momentId&quot;</span>, vertifyToken, vertifyMomentPermission,update);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = momentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>middleware</code>文件夹下新建<code>permission.middleware.js</code>，验证登录的id是否有权限更改相关数据；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> errorType = <span class="built_in">require</span>(<span class="string">&quot;../constants/error-types&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> permissionService = <span class="built_in">require</span>(<span class="string">&quot;../service/permission.service&quot;</span>);</span><br><span class="line"><span class="comment">// 验证登录的id是否有权限更改相关数据</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">vertifyMomentPermission</span> = <span class="keyword">async</span> (<span class="params">ctx, next</span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">// 上个验证token的中间件在ctx上绑定了userInfo,即登录的用户信息;</span></span><br><span class="line">  <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">  <span class="keyword">const</span> &#123; momentId &#125; = ctx.<span class="property">params</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">await</span> permissionService.<span class="title function_">checkMoment</span>(id, momentId);</span><br><span class="line">  <span class="keyword">if</span> (result.<span class="property">length</span> === <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> permissionError = <span class="keyword">new</span> <span class="title class_">Error</span>(errorType.<span class="property">NO_PERMISSION</span>);</span><br><span class="line">    <span class="keyword">return</span> ctx.<span class="property">app</span>.<span class="title function_">emit</span>(<span class="string">&quot;error&quot;</span>, permissionError, ctx);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">next</span>();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  vertifyMomentPermission,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下新建<code>permission.service.js</code>，用户查询数据库；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">PermissionService</span> &#123;</span><br><span class="line">    <span class="comment">// 数据库查看是否存在相应权限</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">checkMoment</span>(<span class="params">userId, momentId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`SELECT * FROM moment WHERE id=? AND user_id=?`</span>;</span><br><span class="line">    <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement, [momentId, userId]);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">PermissionService</span>();</span><br></pre></td></tr></table></figure><ul><li><code>constants</code>文件夹下<code>error-types.js</code>，新增无权限的常量；</li></ul><figure class="highlight js"><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"><span class="keyword">const</span> <span class="variable constant_">NO_PERMISSION</span> = <span class="string">&quot;no_permission&quot;</span>;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="variable constant_">NO_PERMISSION</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li><code>app</code>文件夹下<code>errorHandler.js</code>，新增无权限的判断；</li></ul><figure class="highlight js"><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"><span class="keyword">case</span> errorType.<span class="property">NO_PERMISSION</span>:</span><br><span class="line">  status = <span class="number">403</span>; </span><br><span class="line">  message = <span class="string">&quot;权限不足~&quot;</span>;</span><br><span class="line"><span class="keyword">break</span>; </span><br></pre></td></tr></table></figure><h3 id="删除动态"><a href="#删除动态" class="headerlink" title="删除动态"></a>删除动态</h3><ul><li><code>router</code>文件夹下的<code>moment.router.js</code>，新增删除用户动态接口；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;vertifyMomentPermission&#125;= <span class="built_in">require</span>(<span class="string">&quot;../middleware/permission.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; postUpdates,list,detail,update,remove&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/moment.controller&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> momentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/moment&quot;</span> &#125;);</span><br><span class="line"><span class="comment">// 删除动态</span></span><br><span class="line">momentRouter.<span class="title function_">delete</span>(<span class="string">&quot;/:momentId&quot;</span>, vertifyToken, vertifyMomentPermission,remove);</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>moment.controller.js</code>，新增删除用户的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 删除动态</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">remove</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; momentId &#125; = ctx.<span class="property">params</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">await</span> momentService.<span class="title function_">removeById</span>(momentId);</span><br><span class="line">  ctx.<span class="property">body</span> = &#123;</span><br><span class="line">    <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&quot;删除动态成功&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: result,</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>moment.service.js</code>，新增删除用户的SQL操作；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 删除动态</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">removeById</span>(<span class="params">momentId</span>)&#123;</span><br><span class="line">  <span class="keyword">const</span> statement = <span class="string">`DELETE FROM moment WHERE id=?`</span>;</span><br><span class="line">  <span class="keyword">const</span> [serviceResult] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[momentId]);</span><br><span class="line">  <span class="keyword">return</span> serviceResult;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>通过<code>/moment/1</code>(DELETE)删除详情数据。</p></blockquote><h2 id="评论动态接口-一对多"><a href="#评论动态接口-一对多" class="headerlink" title="评论动态接口(一对多)"></a>评论动态接口(一对多)</h2><blockquote><p>设计表字段思路：谁，发表了什么评论，该评论评论了哪条动态；</p><p>一条评论(含唯一id)只能是一个用户发的，一个用户可以发多条评论(含唯一id)；</p><p>属于”一对多”关系型数据库表；</p></blockquote><h3 id="数据库表-1"><a href="#数据库表-1" class="headerlink" title="数据库表"></a>数据库表</h3><figure class="highlight sql"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">--  创建comment 评论表</span></span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `comment`(</span><br><span class="line"> id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line"><span class="comment">--  评论的内容</span></span><br><span class="line"> content <span class="type">VARCHAR</span>(<span class="number">1000</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span>, </span><br><span class="line"><span class="comment">--  在哪条动态下评论的</span></span><br><span class="line"> moment_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"><span class="comment">--  谁评论的</span></span><br><span class="line"> user_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"><span class="comment">--  此条动态有多个评论,给每条评论一个id;就可以实现 评论 动态下面的某一条具体评论的效果(回复评论);</span></span><br><span class="line"> comment_id <span class="type">INT</span> <span class="keyword">DEFAULT</span> <span class="keyword">NULL</span>,</span><br><span class="line"> ctrateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> updateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span> <span class="keyword">ON</span> <span class="keyword">UPDATE</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> <span class="keyword">FOREIGN</span> KEY(moment_id) <span class="keyword">REFERENCES</span> moment(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE,</span><br><span class="line"> <span class="keyword">FOREIGN</span> KEY(user_id) <span class="keyword">REFERENCES</span> <span class="keyword">user</span>(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE,</span><br><span class="line"><span class="comment">--  comment_id对应自身表中的id</span></span><br><span class="line"> <span class="keyword">FOREIGN</span> KEY(comment_id) <span class="keyword">REFERENCES</span> comment(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE</span><br><span class="line">)</span><br></pre></td></tr></table></figure><h3 id="发表评论"><a href="#发表评论" class="headerlink" title="发表评论"></a>发表评论</h3><blockquote><p>需要知道：谁，在哪个动态下，评论了什么内容；</p></blockquote><ul><li><code>router</code>文件夹下新建<code>comment.router.js</code>，用来存放发表评论的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; create &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/comment.controller&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> commentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/comment&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 增：新增评论</span></span><br><span class="line">commentRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyToken, create);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = commentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下新建<code>comment.controller.js</code>，用来存放发表评论的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> commentService = <span class="built_in">require</span>(<span class="string">&quot;../service/comment.service&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">CommentController</span> &#123;</span><br><span class="line">  <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 获取动态的内容,评论动态的Id</span></span><br><span class="line">    <span class="keyword">const</span> &#123; content, momentId &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 获取动态是谁发布的(谁登录就是谁发布的,验证token的时候再ctx上绑定了userInfo属性);</span></span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> commentService.<span class="title function_">create</span>(content, id, momentId);</span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;发表评论成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">CommentController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下新建<code>comment.service.js</code>，用来存放发表评论的SQL处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">CommentService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">content, userId, momentId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO comment (content,user_id,moment_id) VALUES (?,?,?)`</span>;</span><br><span class="line">    <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement, [content,userId,momentId]);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">CommentService</span>();</span><br></pre></td></tr></table></figure><blockquote><p>通过<code>/comment</code>(POST)发表评论；例：body为</p><p><code>&#123;     &quot;content&quot;: &quot;kunkun打球好帅&quot;,     &quot;momentId&quot;: 3 &#125;</code></p><p>注：其中<code>momentId</code>的value值，必须是moment表中存在的，因为设置了外键约束。</p></blockquote><h3 id="回复评论"><a href="#回复评论" class="headerlink" title="回复评论"></a>回复评论</h3><blockquote><p>相比较于发表评论，回复评论需要多一个参数，即：<code>comment_id</code>；</p></blockquote><ul><li><code>router</code>文件夹下的<code>comment.router.js</code>，用来存放回复评论的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; create,reply &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/comment.controller&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> commentRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/comment&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 增：新增评论</span></span><br><span class="line">commentRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, vertifyToken, create);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 增：回复评论</span></span><br><span class="line">commentRouter.<span class="title function_">post</span>(<span class="string">&quot;/reply&quot;</span>, vertifyToken, reply);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = commentRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>comment.controller.js</code>，用来存回复的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> commentService = <span class="built_in">require</span>(<span class="string">&quot;../service/comment.service&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">CommentController</span> &#123;</span><br><span class="line">  <span class="comment">// 发表动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 获取动态的内容,评论动态的Id</span></span><br><span class="line">    <span class="keyword">const</span> &#123; content, momentId &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 获取动态是谁发布的(谁登录就是谁发布的,验证token的时候再ctx上绑定了userInfo属性);</span></span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> commentService.<span class="title function_">create</span>(content, id, momentId);</span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;发表评论成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 回复动态</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">reply</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 获取动态的内容,评论动态的Id,回复的Id</span></span><br><span class="line">    <span class="keyword">const</span> &#123; content, momentId,commentId &#125; = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 获取动态是谁发布的(谁登录就是谁发布的,验证token的时候再ctx上绑定了userInfo属性);</span></span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 将动态存储到数据库中;(需要放到service层)</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> commentService.<span class="title function_">reply</span>(content, id, momentId,commentId);</span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;回复评论成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">CommentController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>comment.service.js</code>，用来存放回复评论的SQL处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">CommentService</span> &#123;</span><br><span class="line">  <span class="comment">// 数据库插入数据</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">content, userId, momentId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO comment (content,user_id,moment_id) VALUES (?,?,?)`</span>;</span><br><span class="line">    <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement, [content,userId,momentId]);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">reply</span>(<span class="params">content, userId, momentId,commentId</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`INSERT INTO comment (content,user_id,moment_id,comment_id) VALUES (?,?,?,?)`</span>;</span><br><span class="line">    <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement, [content,userId,momentId,commentId]);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">CommentService</span>();</span><br></pre></td></tr></table></figure><blockquote><p>通过<code>/comment/reply</code>(POST)发表评论；例：body为</p><p><code>&#123;     &quot;content&quot;: &quot;确实帅,我家鸽鸽太有实力了&quot;,     &quot;momentId&quot;: 3,     &quot;commentId&quot;:6 &#125;</code></p><p>注：其中<code>momentId/commentId</code>的value值，必须是moment&#x2F;comment表中存在的，因为设置了外键约束。</p></blockquote><h2 id="动态信息与评论接口-一对多"><a href="#动态信息与评论接口-一对多" class="headerlink" title="动态信息与评论接口(一对多)"></a>动态信息与评论接口(一对多)</h2><blockquote><p>一般来说，查询动态信息列表及详情的时候，也需要将评论一并查询出来。现需求如下：</p></blockquote><ul><li>查询动态列表时，显示评论的个数；</li><li>查询动态详情时，显示评论的列表；</li></ul><h3 id="查询动态列表-1"><a href="#查询动态列表-1" class="headerlink" title="查询动态列表"></a>查询动态列表</h3><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 查询动态列表SQL</span></span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">m.id <span class="keyword">as</span> id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span><br><span class="line"><span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,u.id,<span class="string">&#x27;name&#x27;</span>,u.name) <span class="keyword">as</span> userInfo</span><br><span class="line"><span class="keyword">FROM</span> moment <span class="keyword">as</span> m</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `<span class="keyword">user</span>` <span class="keyword">as</span> u <span class="keyword">ON</span> u.id<span class="operator">=</span>m.user_id</span><br><span class="line">LIMIT <span class="number">10</span> <span class="keyword">OFFSET</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 查询评论个数SQL</span></span><br><span class="line"><span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(<span class="operator">*</span>) <span class="keyword">FROM</span> `comment` <span class="keyword">WHERE</span> moment_id<span class="operator">=</span><span class="number">3</span></span><br></pre></td></tr></table></figure><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 两者结合(SQL子查询)</span></span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">m.id <span class="keyword">as</span> id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span><br><span class="line"><span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,u.id,<span class="string">&#x27;name&#x27;</span>,u.name) <span class="keyword">as</span> userInfo,</span><br><span class="line">(<span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(<span class="operator">*</span>) <span class="keyword">FROM</span> comment <span class="keyword">WHERE</span> comment.moment_id<span class="operator">=</span>m.id) commentCount</span><br><span class="line"><span class="keyword">FROM</span> moment <span class="keyword">as</span> m</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `<span class="keyword">user</span>` <span class="keyword">as</span> u <span class="keyword">ON</span> u.id<span class="operator">=</span>m.user_id</span><br><span class="line">LIMIT <span class="number">10</span> <span class="keyword">OFFSET</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><h3 id="查询动态详情-1"><a href="#查询动态详情-1" class="headerlink" title="查询动态详情"></a>查询动态详情</h3><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 查询动态详情SQL</span></span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">    m.id <span class="keyword">as</span> id,m.content content,m.ctrateTime ctrateTime,m.updateTime updateTime,</span><br><span class="line">    <span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,u.id,<span class="string">&#x27;name&#x27;</span>,u.name) <span class="keyword">as</span> userInfo</span><br><span class="line">    <span class="keyword">FROM</span> moment <span class="keyword">as</span> m</span><br><span class="line">    <span class="keyword">LEFT</span> <span class="keyword">JOIN</span> <span class="keyword">user</span> <span class="keyword">as</span> u <span class="keyword">ON</span> u.id<span class="operator">=</span>m.user_id</span><br><span class="line">    <span class="keyword">WHERE</span> m.id<span class="operator">=</span><span class="number">3</span></span><br></pre></td></tr></table></figure><figure class="highlight sql"><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"><span class="comment">-- 查询评论列表SQL</span></span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `comment` <span class="keyword">WHERE</span> `comment`.moment_id<span class="operator">=</span><span class="number">3</span></span><br><span class="line"><span class="comment">-- 可以将两者查询出来,然后使用JS进行拼接处理;</span></span><br></pre></td></tr></table></figure><h2 id="标签动态接口-多对多"><a href="#标签动态接口-多对多" class="headerlink" title="标签动态接口(多对多)"></a>标签动态接口(多对多)</h2><blockquote><p>设计表字段思路：标签对应了哪条动态；没人在意标签是谁建的；</p><p>一个标签可以对应多条动态，一条动态可以有个标签；</p><p>属于”多对多”关系型数据库表；</p></blockquote><h3 id="数据库表-2"><a href="#数据库表-2" class="headerlink" title="数据库表"></a>数据库表</h3><ul><li>标签表</li></ul><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> label(</span><br><span class="line">id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line">name <span class="type">VARCHAR</span>(<span class="number">10</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span> <span class="keyword">UNIQUE</span>,</span><br><span class="line">ctrateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line">updateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span> <span class="keyword">ON</span> <span class="keyword">UPDATE</span> <span class="built_in">CURRENT_TIMESTAMP</span></span><br><span class="line">)</span><br></pre></td></tr></table></figure><ul><li>关系表(记录标签，动态的关系)</li></ul><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> moment_label(</span><br><span class="line"><span class="comment">-- id INT PRIMARY KEY AUTO_INCREMENT, -- 这里使用联合主键,当然也可以用id</span></span><br><span class="line">moment_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line">label_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"><span class="keyword">PRIMARY</span> KEY(moment_id,label_id),<span class="comment">-- 联合主键</span></span><br><span class="line">ctrateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line">updateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span> <span class="keyword">ON</span> <span class="keyword">UPDATE</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"><span class="keyword">FOREIGN</span> KEY(moment_id) <span class="keyword">REFERENCES</span> moment(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE,</span><br><span class="line"><span class="keyword">FOREIGN</span> KEY(label_id) <span class="keyword">REFERENCES</span> label(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE</span><br><span class="line">)</span><br></pre></td></tr></table></figure><ul><li>多对多，三张表，关系表加外键；</li><li>添加数据时，先添加父表记录(moment，label)，再添加子表(moment_label)记录；</li><li>删除数据时，先删除子表记录(moment_label)，再删除父表记录(moment，label)；</li><li>详细代码：可参考上文接口；仅是sql语句更变了；</li></ul><h2 id="文件处理接口"><a href="#文件处理接口" class="headerlink" title="文件处理接口"></a>文件处理接口</h2><h3 id="上传头像"><a href="#上传头像" class="headerlink" title="上传头像"></a>上传头像</h3><ul><li>安装处理文件的库</li></ul><blockquote><p><code>npm i koa-multer</code>的时候给出警告: Please use @koa&#x2F;multer instead；</p><p>通过查阅github发现：koa-multer在2018年就不再维护，但是koa官方自己研发了相关multer库：<a href="https://github.com/koajs/multer">@koa&#x2F;multer</a>，这里使用官方推荐的；</p><p>相对于koa-multer，koa&#x2F;multer仅仅在获取文件的方式从ctx.req.file–&gt;ctx.request.file；别的用法和koa-multer一致；</p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save @koa/multer multer</span><br></pre></td></tr></table></figure><h4 id="基本逻辑"><a href="#基本逻辑" class="headerlink" title="基本逻辑"></a>基本逻辑</h4><ul><li><code>router</code>文件夹下新建<code>file.router.js</code>，用来存放上传头像的路由逻辑；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; handleAvatar &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/handleAvatar.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; uploadAvatar &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/file.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> fileRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/file&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line">fileRouter.<span class="title function_">post</span>(<span class="string">&quot;/avatar&quot;</span>, vertifyToken, handleAvatar, uploadAvatar);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = fileRouter;</span><br></pre></td></tr></table></figure><ul><li><code>middleware</code>文件夹下新建<code>handleAvatar.middleware.js</code>，用来存放上传头像中间件的逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;@koa/multer&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> uploadAvatars = <span class="title function_">multer</span>(&#123;</span><br><span class="line">  <span class="comment">// 注意这里的./是和程序的启动目录有关系的，不是当前目录</span></span><br><span class="line">  <span class="attr">dest</span>: <span class="string">&quot;./uploads/&quot;</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> handleAvatar = uploadAvatars.<span class="title function_">single</span>(<span class="string">&quot;avatar&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  handleAvatar,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下新建<code>file.controller.js</code>，用来存放上传头像的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">FileController</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> files = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(files);</span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileController</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">/**console.log(files)的打印:</span></span><br><span class="line"><span class="comment">&#123;</span></span><br><span class="line"><span class="comment">  fieldname: &#x27;avatar&#x27;,</span></span><br><span class="line"><span class="comment">  originalname: &#x27;default_cover_7.webp&#x27;,</span></span><br><span class="line"><span class="comment">  encoding: &#x27;7bit&#x27;,</span></span><br><span class="line"><span class="comment">  mimetype: &#x27;image/webp&#x27;,</span></span><br><span class="line"><span class="comment">  destination: &#x27;./uploads/&#x27;,</span></span><br><span class="line"><span class="comment">  filename: &#x27;7a30342648914762d1cc040219d2a6e1&#x27;,</span></span><br><span class="line"><span class="comment">  path: &#x27;uploads\\7a30342648914762d1cc040219d2a6e1&#x27;,</span></span><br><span class="line"><span class="comment">  size: 382920</span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure><p>使用postman请求<code>/file/avatar</code>(POST)，form-data选择File，key为avatar，value为上传的头像；发现项目自动创建了uploads文件夹，里面包含了上传的头像。</p><h4 id="数据库表-3"><a href="#数据库表-3" class="headerlink" title="数据库表"></a>数据库表</h4><blockquote><p>根据file信息，挑选几个有用的字段进行保存，还需要将上传头像的用户ID进行保存，后续为了给这个人设置头像；</p></blockquote><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `avatar`(</span><br><span class="line"> id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line"> filename <span class="type">VARCHAR</span>(<span class="number">255</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span> <span class="keyword">UNIQUE</span>,</span><br><span class="line"> mimetype <span class="type">VARCHAR</span>(<span class="number">30</span>),</span><br><span class="line"> size <span class="type">INT</span>,</span><br><span class="line"> user_id <span class="type">INT</span>,</span><br><span class="line"> ctrateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> updateTime <span class="type">TIMESTAMP</span> <span class="keyword">DEFAULT</span> <span class="built_in">CURRENT_TIMESTAMP</span> <span class="keyword">ON</span> <span class="keyword">UPDATE</span> <span class="built_in">CURRENT_TIMESTAMP</span>,</span><br><span class="line"> <span class="keyword">FOREIGN</span> KEY(user_id) <span class="keyword">REFERENCES</span> <span class="keyword">user</span>(id) <span class="keyword">ON</span> <span class="keyword">DELETE</span> CASCADE <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE</span><br><span class="line">)</span><br></pre></td></tr></table></figure><h4 id="插入数据-1"><a href="#插入数据-1" class="headerlink" title="插入数据"></a>插入数据</h4><ul><li>在基础逻辑上，在<code>controller</code>文件夹下<code>file.controller.js</code>中，优化存放上传头像的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> serviceFile = <span class="built_in">require</span>(<span class="string">&quot;../service/file.service&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">FileController</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> files = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="comment">// console.log(files);</span></span><br><span class="line">    <span class="comment">// 1.获取相应的信息</span></span><br><span class="line">    <span class="keyword">const</span> &#123;filename,mimetype,size &#125; = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="keyword">const</span> &#123;id&#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 2.保存到数据库</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> serviceFile.<span class="title function_">uploadAvatar</span>(filename,mimetype,size,id);</span><br><span class="line">    <span class="comment">// 3.返回</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: result,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下新建<code>file.service.js</code>，用来存放上传头像的SQL逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">FileService</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">filename,mimetype,size,userId</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`INSERT INTO avatar (filename,mimetype,size,user_id) VALUES (?,?,?,?)`</span>;</span><br><span class="line">        <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[filename,mimetype,size,userId]);</span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileService</span>();</span><br></pre></td></tr></table></figure><h3 id="浏览头像"><a href="#浏览头像" class="headerlink" title="浏览头像"></a>浏览头像</h3><blockquote><p>现在头像是没办法浏览的；现在提供一个浏览头像的接口；</p></blockquote><ul><li>因为头像是user的，所以这里选择在user下提供浏览头像的接口；<code>router</code>文件夹下的<code>user.router.js</code>，用来提供一个浏览头像的接口；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/users&quot;</span> &#125;);</span><br><span class="line"><span class="keyword">const</span> &#123;verifyUser,handlePassword&#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/user.middleware.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> &#123;create,showAvatarImage&#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/user.controller.js&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册用户</span></span><br><span class="line">userRouter.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,verifyUser,handlePassword, create);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 为用户提供头像展示(看图片不需要验证权限)</span></span><br><span class="line">userRouter.<span class="title function_">get</span>(<span class="string">&quot;/avatar/:userId&quot;</span>,showAvatarImage)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = userRouter;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>user.controller.js</code>，用来处理用户头像展示的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs= <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> service = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> fileService = <span class="built_in">require</span>(<span class="string">&quot;../service/file.service.js&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserController</span> &#123;</span><br><span class="line">  <span class="comment">// 因为操作数据库是异步操作的,所以直接用 async 函数; async函数为对象的方法,下面直接module导出了一个对象;</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">create</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 获取用户请求传递的参数</span></span><br><span class="line">    <span class="keyword">const</span> user = ctx.<span class="property">request</span>.<span class="property">body</span>;</span><br><span class="line">    <span class="comment">// 查询数据</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> service.<span class="title function_">create</span>(user);</span><br><span class="line">    <span class="comment">// 返回数据</span></span><br><span class="line">    ctx.<span class="property">body</span> = result;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 用户头像展示</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">showAvatarImage</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="comment">// 1.获取用户的id</span></span><br><span class="line">    <span class="keyword">const</span> &#123; userId &#125; = ctx.<span class="property">params</span>;</span><br><span class="line">    <span class="comment">// 2.获取userID对应的头像信息</span></span><br><span class="line">    <span class="keyword">const</span> avatarInfo = <span class="keyword">await</span> fileService.<span class="title function_">showAvatarImageById</span>(userId);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(avatarInfo)</span><br><span class="line">    <span class="comment">// 3.读取头像所在的文件</span></span><br><span class="line">    <span class="keyword">const</span> &#123; filename, mimetype &#125; = avatarInfo;</span><br><span class="line">    <span class="comment">// 创建一个可读流</span></span><br><span class="line">    ctx.<span class="property">body</span> = fs.<span class="title function_">createReadStream</span>(<span class="string">`./uploads/<span class="subst">$&#123;filename&#125;</span>`</span>);</span><br><span class="line">    <span class="comment">// 设置响应头信息</span></span><br><span class="line">    ctx.<span class="title function_">set</span>(<span class="string">&quot;Content-Type&quot;</span>, mimetype);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserController</span>(); <span class="comment">//导出的是一个对象(类的实例)</span></span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>file.service.js</code>，用来做用户头像展示的SQL逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">FileService</span> &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">filename,mimetype,size,userId</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`INSERT INTO avatar (filename,mimetype,size,user_id) VALUES (?,?,?,?)`</span>;</span><br><span class="line">        <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[filename,mimetype,size,userId]);</span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">showAvatarImageById</span>(<span class="params">userId</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`SELECT * FROM avatar WHERE user_id=?`</span>;</span><br><span class="line">        <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[userId]);</span><br><span class="line">        <span class="comment">// 用户可能上传多张头像,所以result数组里面展示最后一个对象;</span></span><br><span class="line">        <span class="keyword">return</span> result[result.<span class="property">length</span>-<span class="number">1</span>];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileService</span>();</span><br></pre></td></tr></table></figure><p>浏览器通过<code>http://127.0.0.1:3000/users/avatar/1</code>；或者postman通过<code>/users/avatar/1</code>即可查阅图片；</p><h4 id="修改user表"><a href="#修改user表" class="headerlink" title="修改user表"></a>修改user表</h4><blockquote><p>在user表中，增加一个avatar_url字段；</p></blockquote><ul><li><code>controller</code>文件夹下的<code>file.controller.js</code>，用来处理上传用户头像存储的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> serviceFile = <span class="built_in">require</span>(<span class="string">&quot;../service/file.service&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userService = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;<span class="variable constant_">SERVER_HOST</span>,<span class="variable constant_">APP_PORT</span>&#125; = <span class="built_in">require</span>(<span class="string">&quot;../app/config&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">FileController</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> files = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="comment">// console.log(files);</span></span><br><span class="line">    <span class="comment">// 1.获取相应的信息</span></span><br><span class="line">    <span class="keyword">const</span> &#123;filename,mimetype,size &#125; = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="keyword">const</span> &#123;id&#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 2.保存到数据库</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> serviceFile.<span class="title function_">uploadAvatar</span>(filename,mimetype,size,id);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将头像地址信息在user表中也存储一份;</span></span><br><span class="line">    <span class="keyword">const</span> avatar_url = <span class="string">`<span class="subst">$&#123;SERVER_HOST&#125;</span>:<span class="subst">$&#123;APP_PORT&#125;</span>/users/avatar/<span class="subst">$&#123;id&#125;</span>`</span>;</span><br><span class="line">    <span class="keyword">const</span> userResult = <span class="keyword">await</span> userService.<span class="title function_">updateUserAvatar</span>(avatar_url,id);</span><br><span class="line">    <span class="comment">// 3.返回</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: avatar_url,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>user.service.js</code>，用来做更新用户头像地址的SQL逻辑处理；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> connections = <span class="built_in">require</span>(<span class="string">&quot;../app/database.js&quot;</span>);</span><br><span class="line"><span class="comment">// 专门做数据库操作的;</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">UserService</span> &#123;</span><br><span class="line">    <span class="comment">// 更新用户头像地址</span></span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">updateUserAvatar</span>(<span class="params">avatarUrl,userId</span>)&#123;</span><br><span class="line">        <span class="keyword">const</span> statement = <span class="string">`UPDATE user SET avatar_url=? WHERE id=?`</span>;</span><br><span class="line">        <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[avatarUrl,userId]);</span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">UserService</span>();</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>file.controller.js</code>，返回头像地址需要写到配置文件里</li></ul><figure class="highlight js"><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"># .<span class="property">env</span></span><br><span class="line"><span class="variable constant_">APP_PORT</span>=<span class="number">3000</span></span><br><span class="line"><span class="variable constant_">SERVER_HOST</span>=<span class="attr">http</span>:<span class="comment">//192.168.11.242</span></span><br></pre></td></tr></table></figure><ul><li><code>app</code>文件夹下的<code>config.js</code>将配置文件中的变量暴露出去；</li></ul><figure class="highlight js"><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"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="variable constant_">APP_PORT</span></span><br><span class="line">    <span class="variable constant_">SERVER_HOST</span></span><br><span class="line">&#125; = process.<span class="property">env</span>;</span><br></pre></td></tr></table></figure><p>请求<code>/file/avatar</code>(POST)上传文件，如果成功，返回结果如下：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;code&quot;</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="string">&quot;message&quot;</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">    <span class="string">&quot;data&quot;</span>: <span class="string">&quot;http://192.168.11.242:3000/users/avatar/1&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 通过访问http://192.168.11.242:3000/users/avatar/1(接口),访问图片。</span></span><br></pre></td></tr></table></figure><blockquote><p>但是吧，这个跟我们平时见到的图片地址不一样，我们平时见到的图片地址是xx.jpg&#x2F;png结尾的，而不是上面这种。下面讲述一下如何展示图片地址是xx.jpg&#x2F;png结尾的。</p></blockquote><h3 id="上传头像2"><a href="#上传头像2" class="headerlink" title="上传头像2"></a>上传头像2</h3><p>参考文献：<a href="https://blog.csdn.net/LQlove1/article/details/128698984">koa-multer实现图片上传</a>；<a href="https://blog.csdn.net/zy21131437/article/details/130440198">Koa实现图片上传功能</a>；<a href="https://juejin.cn/post/7033290552523096078">koa处理上传图片</a>；</p><blockquote><p>常见图片后缀的展示，需要用到node自带的path模块和static模块和第三方包koa&#x2F;multer；</p><p>在avatar表中，现在的filename是存储的类似于<code>e91b35e24586c1cb208a544f6acb5961</code>的图片信息，需要改为存储有后缀名的filename。</p><p>这里问了公司后端：filename一般都是设置为UNIQUE，且不会保留前端传过来的本身的文件名；因为如果传过来两个一样的文件名，后端不知道返回哪个；除非已经做好命名规范，可不设置为UNIQUE；</p><p>即：上传的文件名一般不保存，除非约定好了上传的文件名唯一；</p></blockquote><ul><li>安装所需依赖</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install koa<span class="operator">-</span><span class="keyword">static</span></span><br></pre></td></tr></table></figure><ul><li><code>router</code>文件夹下<code>file.router.js</code>，新写一个上传头像的路由逻辑；</li></ul><figure class="highlight js"><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="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> &#123; vertifyToken &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/auth.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; handleAvatar,handleAvatar2 &#125; = <span class="built_in">require</span>(<span class="string">&quot;../middleware/handleAvatar.middleware.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; uploadAvatar,uploadAvatar2 &#125; = <span class="built_in">require</span>(<span class="string">&quot;../controller/file.controller.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> fileRouter = <span class="keyword">new</span> <span class="title class_">Router</span>(&#123; <span class="attr">prefix</span>: <span class="string">&quot;/file&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 上传头像,没有常见的后缀名,即通过接口访问图片地址，不需要后缀</span></span><br><span class="line">fileRouter.<span class="title function_">post</span>(<span class="string">&quot;/avatar&quot;</span>, vertifyToken, handleAvatar, uploadAvatar);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 上传头像，有常见的后缀名</span></span><br><span class="line">fileRouter.<span class="title function_">post</span>(<span class="string">&quot;/avatar2&quot;</span>, vertifyToken, handleAvatar2, uploadAvatar2);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = fileRouter;</span><br></pre></td></tr></table></figure><ul><li><code>middleware</code>文件夹下的<code>handleAvatar.middleware.js</code>，新写一个存放上传头像中间件的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;@koa/multer&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> uploadAvatars = <span class="title function_">multer</span>(&#123;</span><br><span class="line">  <span class="comment">// 注意这里的./是和程序的启动目录有关系的，不是当前目录</span></span><br><span class="line">  <span class="attr">dest</span>: <span class="string">&quot;./uploads/&quot;</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> handleAvatar = uploadAvatars.<span class="title function_">single</span>(<span class="string">&quot;avatar&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 上传头像，有常见的后缀名</span></span><br><span class="line"><span class="keyword">const</span> storage = multer.<span class="title function_">diskStorage</span>(&#123;</span><br><span class="line">  <span class="attr">destination</span>: <span class="function">(<span class="params">req, file, cb</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 可以用 path.join(__dirname ,&#x27;xxx&#x27;)拼接,就不用考虑相对路径的问题了;</span></span><br><span class="line">    <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="string">&quot;./uploads/&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line"> </span><br><span class="line">  <span class="comment">// 这里一般不会保留原来的,否则会导致后端不知道返回啥;除非约定好了</span></span><br><span class="line">  <span class="attr">filename</span>: <span class="function">(<span class="params">req, file, cb</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="title class_">Date</span>.<span class="title function_">now</span>() + path.<span class="title function_">extname</span>(file.<span class="property">originalname</span>));</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> uploadAvatars2 = <span class="title function_">multer</span>(&#123;</span><br><span class="line">  storage,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> handleAvatar2 = uploadAvatars2.<span class="title function_">single</span>(<span class="string">&quot;avatar2&quot;</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  handleAvatar,</span><br><span class="line">  handleAvatar2,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><ul><li><code>controller</code>文件夹下的<code>file.controller.js</code>，新写一个存放上传头像的逻辑处理；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> serviceFile = <span class="built_in">require</span>(<span class="string">&quot;../service/file.service&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> userService = <span class="built_in">require</span>(<span class="string">&quot;../service/user.service&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; <span class="variable constant_">SERVER_HOST</span>, <span class="variable constant_">APP_PORT</span> &#125; = <span class="built_in">require</span>(<span class="string">&quot;../app/config&quot;</span>);</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">FileController</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">uploadAvatar</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> files = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="comment">// console.log(files);</span></span><br><span class="line">    <span class="comment">// 1.获取相应的信息</span></span><br><span class="line">    <span class="keyword">const</span> &#123; filename, mimetype, size &#125; = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 2.保存到数据库</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> serviceFile.<span class="title function_">uploadAvatar</span>(filename, mimetype, size, id);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将头像地址信息在user表中也存储一份;</span></span><br><span class="line">    <span class="keyword">const</span> avatar_url = <span class="string">`<span class="subst">$&#123;SERVER_HOST&#125;</span>:<span class="subst">$&#123;APP_PORT&#125;</span>/users/avatar/<span class="subst">$&#123;id&#125;</span>`</span>;</span><br><span class="line">    <span class="keyword">await</span> userService.<span class="title function_">updateUserAvatar</span>(avatar_url, id);</span><br><span class="line">    <span class="comment">// 3.返回</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: avatar_url,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">    </span><br><span class="line">  <span class="comment">// 有后缀名的头像</span></span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">uploadAvatar2</span>(<span class="params">ctx, next</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> files = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="comment">// console.log(files);</span></span><br><span class="line">    <span class="comment">// 1.获取相应的信息</span></span><br><span class="line">    <span class="keyword">const</span> &#123; filename, mimetype, size &#125; = ctx.<span class="property">request</span>.<span class="property">file</span>;</span><br><span class="line">    <span class="keyword">const</span> &#123; id &#125; = ctx.<span class="property">userInfo</span>;</span><br><span class="line">    <span class="comment">// 2.保存到数据库</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> serviceFile.<span class="title function_">uploadAvatar</span>(filename, mimetype, size, id);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将头像地址信息在user表中也存储一份;</span></span><br><span class="line">    <span class="keyword">const</span> avatar_url = <span class="string">`<span class="subst">$&#123;SERVER_HOST&#125;</span>:<span class="subst">$&#123;APP_PORT&#125;</span>/<span class="subst">$&#123;filename&#125;</span>`</span>;</span><br><span class="line">    <span class="keyword">await</span> userService.<span class="title function_">updateUserAvatar</span>(avatar_url, id);</span><br><span class="line">    <span class="comment">// 3.返回</span></span><br><span class="line">    ctx.<span class="property">body</span> = &#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">      <span class="attr">data</span>: avatar_url,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">FileController</span>();</span><br></pre></td></tr></table></figure><ul><li><code>service</code>文件夹下的<code>user.service.js</code>，用来做更新用户头像地址的SQL逻辑处理；(这个没有变)；相对于通过接口显示图片，有后缀的是通过koa-static展示的，所以可以不用专门写一个接口浏览头像；</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">    <span class="comment">// 更新用户头像地址</span></span><br><span class="line"><span class="keyword">async</span> <span class="title function_">updateUserAvatar</span>(<span class="params">avatarUrl,userId</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> statement = <span class="string">`UPDATE user SET avatar_url=? WHERE id=?`</span>;</span><br><span class="line">    <span class="keyword">const</span> [result] = <span class="keyword">await</span> connections.<span class="title function_">execute</span>(statement,[avatarUrl,userId]);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>koa-static静态服务：在<code>app</code>文件夹下的<code>index.js</code></li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path =<span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="keyword">static</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-static&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> useRoutes = <span class="built_in">require</span>(<span class="string">&quot;../router/index.js&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> bodyParser= <span class="built_in">require</span>(<span class="string">&quot;koa-bodyparser&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> errorHandler = <span class="built_in">require</span>(<span class="string">&quot;./errorHandler.js&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">bodyParser</span>());</span><br><span class="line"><span class="comment">// 注册路由</span></span><br><span class="line"><span class="title function_">useRoutes</span>(app); <span class="comment">//传参app参数</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 静态资源服务</span></span><br><span class="line"><span class="keyword">const</span> filePath = path.<span class="title function_">resolve</span>(__dirname,<span class="string">&quot;../../uploads&quot;</span>);</span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">static</span>(filePath));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 错误处理</span></span><br><span class="line">app.<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>,errorHandler);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = app;</span><br></pre></td></tr></table></figure><p>请求<code>/file/avatar2</code>(POST)，文件格式选：form-data(File)，key为avatar2，value为文件；返回结果为：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;code&quot;</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="string">&quot;message&quot;</span>: <span class="string">&quot;上传成功&quot;</span>,</span><br><span class="line">    <span class="string">&quot;data&quot;</span>: <span class="string">&quot;http://192.168.11.242:3000/1698373200499.webp&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 浏览器访问图片地址,能直接访问,则成功;</span></span><br></pre></td></tr></table></figure>]]></content>
       
       
       <categories>
@@ -85,7 +85,7 @@
       <link href="/articles/65b69107.html"/>
       <url>/articles/65b69107.html</url>
       
-        <content type="html"><![CDATA[<h2 id="正向代理与反向代理"><a href="#正向代理与反向代理" class="headerlink" title="正向代理与反向代理"></a>正向代理与反向代理</h2><ul><li><p>反向代理：服务端将请求转发给其他应用程序，比如转给Java；</p></li><li><p>正向代理：客户端使用，比如vpn；</p></li><li><p>一句话就是：正向代理代理客户端，反向代理代理服务器；</p></li></ul><h2 id="环境"><a href="#环境" class="headerlink" title="环境"></a>环境</h2><blockquote><p>win11、VMware17 Pro、CentOS Linux release 7.9.2009 (Core)，Nginx-1.24.0、静态IP：192.168.209.111、192.168.209.112、192.168.209.113、192.168.209.114；</p></blockquote><ul><li>查看centos版本</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cat /etc/redhat-release</span><br></pre></td></tr></table></figure><ul><li>关闭防火墙：</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl stop firewalld</span><br></pre></td></tr></table></figure><ul><li>重启网络服务</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl restart network</span><br></pre></td></tr></table></figure><h2 id="反向代理"><a href="#反向代理" class="headerlink" title="反向代理"></a>反向代理</h2><h3 id="代理网站"><a href="#代理网站" class="headerlink" title="代理网站"></a>代理网站</h3><figure class="highlight nginx"><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"><span class="section">location</span> / &#123;</span><br><span class="line">    <span class="attribute">proxy_pass</span> http://www.atguigu.com/;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在浏览器地址栏输入<code>192.168.209.111</code>，然后地址栏不变，但访问的是尚硅谷的网站；</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%8601692253825508.png" alt="nginx"></p><h3 id="代理网站，地址栏url发生改变"><a href="#代理网站，地址栏url发生改变" class="headerlink" title="代理网站，地址栏url发生改变"></a>代理网站，地址栏url发生改变</h3><figure class="highlight nginx"><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"><span class="section">location</span> / &#123;</span><br><span class="line">  <span class="attribute">proxy_pass</span>  http://www.csdn.net/;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在浏览器地址栏输入<code>192.168.209.111</code>，地址栏会变成<code>https://www.csdn.net/</code>；相当于做了一个跳转的操作，跳转到了<code>https://www.csdn.net/</code>；</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%861692253641507.png" alt="nginx"></p><p>原因是：目标服务器做了重定向：目标服务器告诉nginx对http协议做301的https重定向，然后nginx再告诉浏览器，最后浏览器根据Location中的地址，重新加载界面；</p><h3 id="代理网站，代理的为https"><a href="#代理网站，代理的为https" class="headerlink" title="代理网站，代理的为https"></a>代理网站，代理的为https</h3><figure class="highlight nginx"><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"><span class="section">location</span> / &#123;</span><br><span class="line">  <span class="attribute">proxy_pass</span>  https://www.csdn.net/;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>nginx报错：<code>nginx: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx.conf:18</code></p><p>不支持代理https，需要证书。</p><p>ps：好像有的nginx版本可以；</p><h2 id="负载均衡"><a href="#负载均衡" class="headerlink" title="负载均衡"></a>负载均衡</h2><blockquote><p>开了四台虚拟机，分别为：192.168.209.111，192.168.209.112、192.168.209.113、192.168.209.114；一台做nginx负载均衡，三台做服务器；</p></blockquote><h3 id="轮询"><a href="#轮询" class="headerlink" title="轮询"></a>轮询</h3><blockquote><p>轮询：负载均衡默认算法， 将请求依次分配给服务器，平均分担负载；</p></blockquote><figure class="highlight nginx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 111环境   </span></span><br><span class="line"><span class="comment">#  111的nginx做负载均衡,真正的机器有三个，分别为112、113、114;</span></span><br><span class="line"><span class="comment">#    负载均衡  fsllala是变量,需要和下面proxy_pass的保持一致;</span></span><br><span class="line"><span class="section">upstream</span> fsllala&#123;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.112:80</span>;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.113:80</span>;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.114:80</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="section">server</span> &#123;</span><br><span class="line">    <span class="attribute">listen</span>       <span class="number">80</span>;</span><br><span class="line">    <span class="attribute">server_name</span>  localhost;</span><br><span class="line"></span><br><span class="line">    <span class="section">location</span> / &#123;</span><br><span class="line">        <span class="attribute">proxy_pass</span>  http://fsllala/;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># 112/113/114环境</span></span><br><span class="line"><span class="section">location</span> / &#123;</span><br><span class="line">    <span class="attribute">root</span>    html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>现象：浏览器地址栏多次刷新访问<code>192.168.209.111</code>；112、113、114的页面交替出现；</p><h3 id="权重"><a href="#权重" class="headerlink" title="权重"></a>权重</h3><blockquote><p>在upstream中配置 weight&#x3D;xx；权重越大的访问的越多；</p></blockquote><figure class="highlight nginx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 111环境   </span></span><br><span class="line"><span class="comment">#  111的nginx做负载均衡,真正的机器有三个，分别为112、113、114;</span></span><br><span class="line"><span class="comment">#    负载均衡  fsllala是变量,需要和下面proxy_pass的保持一致;</span></span><br><span class="line"><span class="section">upstream</span> fsllala&#123;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.112:80</span> weight=<span class="number">8</span>;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.113:80</span> weight=<span class="number">2</span>;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.114:80</span> weight=<span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="section">server</span> &#123;</span><br><span class="line">    <span class="attribute">listen</span>       <span class="number">80</span>;</span><br><span class="line">    <span class="attribute">server_name</span>  localhost;</span><br><span class="line"></span><br><span class="line">    <span class="section">location</span> / &#123;</span><br><span class="line">        <span class="attribute">proxy_pass</span>  http://fsllala/;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># 112/113/114环境</span></span><br><span class="line"><span class="section">location</span> / &#123;</span><br><span class="line">    <span class="attribute">root</span>    html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>现象：浏览器地址栏多次刷新访问<code>192.168.209.111</code>；112、113、114的页面交替出现；其中112出现的次数最多，114最少；注意<strong>并不是</strong>8次112，2次113,1次114这样的顺序来搞的，而是整体出现的概率是这样的；例如：112出现的概率为8&#x2F;(8+2+1)；</p><h2 id="动静分离"><a href="#动静分离" class="headerlink" title="动静分离"></a>动静分离</h2><blockquote><p>思路：当用户请求时，动态请求分配到Express业务服务器，静态资源请求放在Nginx服务器中；</p></blockquote><h3 id="安装node环境"><a href="#安装node环境" class="headerlink" title="安装node环境"></a>安装node环境</h3><ol><li>安装yum。yum相当于在线下载安装，yum是包管理，类似win的msi文件；</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo yum install epel-release</span><br></pre></td></tr></table></figure><ol start="2"><li>安装nodejs</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo yum install nodejs</span><br></pre></td></tr></table></figure><ol start="3"><li>安装npm(上面yum包里只有node)；</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yum install npm</span><br></pre></td></tr></table></figure><ol start="4"><li>安装pm2</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install pm2 -g</span><br></pre></td></tr></table></figure><ol start="5"><li>检查</li></ol><figure class="highlight plaintext"><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">node --version</span><br><span class="line">npm --version</span><br><span class="line">pm2 -V</span><br></pre></td></tr></table></figure><ol start="6"><li>pm2常用命令</li></ol><ul><li>启动进程&#x2F;应用：<code>pm2 start app.js</code></li><li>重命名进程&#x2F;应用：<code>pm2 start app.js --name fsl123</code></li><li>结束进程&#x2F;应用：<code> pm2 stop fsl123</code></li><li>结束所有进程&#x2F;应用：<code>pm2 stop all</code></li><li>删除进程&#x2F;应用 ：<code>pm2 delete fsl123</code></li><li>删除所有进程&#x2F;应用：<code>pm2 delete all</code></li><li>列出所有进程&#x2F;应用：<code>pm2 list</code></li><li>重新启动进程&#x2F;应用：<code>pm2 restart fsl132</code></li><li>重新启动所有进程&#x2F;应用：<code>pm2 restart all</code></li></ul><h3 id="在win11本地进行NodeJs起本地服务"><a href="#在win11本地进行NodeJs起本地服务" class="headerlink" title="在win11本地进行NodeJs起本地服务"></a>在win11本地进行NodeJs起本地服务</h3><ol><li>新建一个文件夹，然后<code>npm install express --save</code></li><li>新建一个serve.js，键入如下代码：</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PORT</span> =<span class="number">3000</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app =<span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> pubilcPath = path.<span class="title function_">resolve</span>(__dirname,<span class="string">&quot;public&quot;</span>);</span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">static</span>(pubilcPath));</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="variable constant_">PORT</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`server is running port:<span class="subst">$&#123;PORT&#125;</span>`</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ol start="3"><li><p>新建一个<code>public</code>文件夹，里面放入vue打包的代码；</p></li><li><p>将本地服务上传至centos；</p></li><li><p>在对应的目录下，通过<code>pm2 start app.js</code>启动express服务；</p></li><li><p>此时，便可以访问express起的服务<code>192.168.209.111:3000</code>；</p></li><li><p>将express服务中public文件夹下的静态文件(css，js，img)删除；现在访问会报错，因为没有对应的资源；</p></li><li><p>通过nginx代理<code>192.168.209.111:3000</code>；并且在html目录下，引入静态文件(css，js，img)；</p></li><li><p>进行如下配置代理</p></li></ol><figure class="highlight nginx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="attribute">worker_processes</span>  <span class="number">1</span>;</span><br><span class="line"><span class="section">events</span> &#123;</span><br><span class="line">    <span class="attribute">worker_connections</span>  <span class="number">1024</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="section">http</span> &#123;</span><br><span class="line">    <span class="attribute">include</span>       mime.types;</span><br><span class="line">    <span class="attribute">default_type</span>  application/octet-stream;</span><br><span class="line">    <span class="attribute">sendfile</span>        <span class="literal">on</span>;</span><br><span class="line">    <span class="attribute">keepalive_timeout</span>  <span class="number">65</span>;</span><br><span class="line"></span><br><span class="line">        <span class="section">server</span> &#123;</span><br><span class="line">        <span class="attribute">listen</span>       <span class="number">80</span>;</span><br><span class="line">        <span class="attribute">server_name</span>  localhost;</span><br><span class="line"></span><br><span class="line">        <span class="section">location</span> / &#123; <span class="comment"># /的优先级比较低，如果下面的location没匹配到，就会走http://xxx这个地址的机器</span></span><br><span class="line">           <span class="attribute">proxy_pass</span>  http://192.168.209.111:3000/;</span><br><span class="line">        &#125;</span><br><span class="line">          <span class="section">location</span> /css &#123;  <span class="comment"># root指的是html，location/css指的是root下的css，所以地址就是html/css</span></span><br><span class="line">        <span class="attribute">root</span> html;</span><br><span class="line">            <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">        &#125;</span><br><span class="line">         <span class="section">location</span> /js &#123; </span><br><span class="line">        <span class="attribute">root</span> html;</span><br><span class="line">            <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="section">location</span> /img &#123; </span><br><span class="line">        <span class="attribute">root</span> html;</span><br><span class="line">            <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="attribute">error_page</span>   <span class="number">500</span> <span class="number">502</span> <span class="number">503</span> <span class="number">504</span>  /50x.html;</span><br><span class="line">        <span class="section">location</span> = /50x.html &#123;</span><br><span class="line">            <span class="attribute">root</span>   html;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="10"><li>通过nginx代理express，并且负载均衡，访问<code>192.168.209.111:80</code>页面正常展示；(PS：这里如果访问exress服务<code>192.168.209.111:3000</code>依旧不能正常展示；)</li><li>通过正则简化如上重复代码</li></ol><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># ~* 这是一个标志，表示正则表达式匹配时不区分大小写</span></span><br><span class="line"><span class="comment"># ~  区分大小写</span></span><br><span class="line"><span class="comment"># /(js|css|img)：这部分正则表达式匹配路径中包含 js、css 或 img 这些字符串的 URL</span></span><br><span class="line"><span class="section">location</span> / &#123;</span><br><span class="line">    <span class="attribute">proxy_pass</span>  http://192.168.209.111:3000/;</span><br><span class="line">&#125;</span><br><span class="line"><span class="section">location</span> ~*/(css|js|img) &#123;  </span><br><span class="line">    <span class="attribute">root</span>   html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="URLRewrite"><a href="#URLRewrite" class="headerlink" title="URLRewrite"></a>URLRewrite</h2><blockquote><p>作用：能够隐藏真实的后端服务器的物理地址；比如真实的URL为<code>192.168.209.111/index.jsp?pageNum=2</code>，这样看上去很长，而且传的参数也暴露了；隐藏成<code>192.168.209.111/2.html</code>这种的URL；</p></blockquote><h2 id="防盗链"><a href="#防盗链" class="headerlink" title="防盗链"></a>防盗链</h2><blockquote><p>还是用上面的项目做例子：现象为：除了没有referers或者referers为192.168.209.111的，别的referers都不能引用css&#x2F;js&#x2F;img，为403；</p></blockquote><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># 给 css/js/img做防盗链</span></span><br><span class="line"><span class="section">location</span> ~*/(css|js|img) &#123;  </span><br><span class="line">    <span class="attribute">valid_referers</span> <span class="literal">none</span> <span class="number">192.168.209.111</span>; <span class="comment"># 允许访问的(没有referers或者referers为192.168.209.111)</span></span><br><span class="line">    <span class="attribute">if</span> (<span class="variable">$invalid_referer</span>)&#123;<span class="comment">#无效的</span></span><br><span class="line">        <span class="attribute">return</span> <span class="number">403</span>;<span class="comment">#返回状态码403</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attribute">root</span> html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>在newTab页单独打开css&#x2F;js&#x2F;img，跳转到自定义界面；</li></ul><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="section">location</span> ~*/(css|js|img) &#123;  </span><br><span class="line">    <span class="attribute">valid_referers</span>  <span class="number">192.168.209.111</span>;</span><br><span class="line">    <span class="attribute">if</span> (<span class="variable">$invalid_referer</span>)&#123;<span class="comment">#无效的</span></span><br><span class="line">        <span class="attribute">return</span> <span class="number">403</span>;<span class="comment">#返回状态码403</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attribute">root</span> html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="attribute">error_page</span>   <span class="number">403</span> <span class="number">500</span> <span class="number">502</span> <span class="number">503</span> <span class="number">504</span>  /50x.html;  <span class="comment">#在这里将防盗链中的状态码403填入;</span></span><br><span class="line"><span class="section">location</span> = /50x.html &#123;</span><br><span class="line">    <span class="attribute">root</span>   html;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>设置防盗链图片</li></ul><blockquote><p>将提示图片放在html&#x2F;img&#x2F;cc.jpg，访问设置防盗链图片时，就返回这cc.jpg张图；</p><p>现象：原来的html页面上，不会向之前的防盗链一样图片裂开，而是展示设置的防盗链图片；</p></blockquote><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="section">location</span> /img&#123;</span><br><span class="line">    <span class="attribute">valid_referers</span> <span class="number">192.168.209.111</span>;</span><br><span class="line">    <span class="attribute">if</span> (<span class="variable">$invalid_referer</span>)&#123;<span class="comment">#无效的</span></span><br><span class="line">        <span class="attribute">rewrite</span><span class="regexp"> ^/</span>  /img/cc.jpg <span class="literal">break</span>; <span class="comment">#这里跟URLRewrite写法一样;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attribute">root</span> html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="高可用场景"><a href="#高可用场景" class="headerlink" title="高可用场景"></a>高可用场景</h2><h3 id="keepalived"><a href="#keepalived" class="headerlink" title="keepalived"></a>keepalived</h3><blockquote><p>用户访问时，访问的是一个虚拟IP，keepalived会选定一个主服务器使用这个虚拟IP；</p><p>每台机器上的keepalived会相互通信，根据其他机器上的keepalived进程是否存在，判断服务器状态，如果默认的Master停止了，就会在剩下的Backup机器中，竞选出一台Nginx服务器作为Master；</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/keepalived1692685358576.png" alt="keepalived"></p><ol><li>yum安装</li></ol><figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">yum</span> install keepalived</span><br></pre></td></tr></table></figure><ol start="2"><li>修改keepalived配置</li></ol><ul><li>配置文件在<code>/etc/keepalived/keepalived.conf</code>；</li><li><code>vrrp_instance</code>、<code>authentication</code>、<code>virtual_router_id</code>、<code>virtual_ipaddress</code>这几个一样的机器，才算是同一个组里。这个组才会选出一个作为Master机器；</li><li>这里我们设置两台机器，分别下载好keepalived，然后进行配置；</li><li>机器一：192.168.209.111</li></ul><figure class="highlight nginx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">! <span class="attribute">Configuration</span> File for keepalived</span><br><span class="line"></span><br><span class="line">global_defs &#123;</span><br><span class="line">   <span class="attribute">router_id</span> fsl111  <span class="comment"># 名字与其他配置了keepalive的机器不重复就行</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">vrrp_instance fsllala111 &#123;  <span class="comment">#vrrp实例名可以随意取</span></span><br><span class="line">    <span class="attribute">state</span> MASTER  <span class="comment">#只能有一个默认的Master，其他写BACKUP</span></span><br><span class="line">    interface ens33  <span class="comment"># ip addr查看下网卡名，默认时ens33</span></span><br><span class="line">    virtual_router_id <span class="number">51</span></span><br><span class="line">    priority <span class="number">100</span>  <span class="comment"># 多台安装了keepalived的机器竞争成为Master的优先级</span></span><br><span class="line">    advert_int <span class="number">1</span></span><br><span class="line">    authentication &#123;</span><br><span class="line">        <span class="attribute">auth_type</span> PASS</span><br><span class="line">        auth_pass <span class="number">1111</span></span><br><span class="line">    &#125;</span><br><span class="line">    virtual_ipaddress &#123;</span><br><span class="line">        192.168.209.200 <span class="comment">#虚拟IP</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>机器二：192.168.209.100</li></ul><figure class="highlight nginx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">! <span class="attribute">Configuration</span> File for keepalived</span><br><span class="line"></span><br><span class="line">global_defs &#123;</span><br><span class="line">   <span class="attribute">router_id</span> fsl100</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">vrrp_instance fsllala111 &#123;</span><br><span class="line">    <span class="attribute">state</span> BACKUP   <span class="comment">#只能有一个默认的Master，其他写BACKUP</span></span><br><span class="line">    interface ens33</span><br><span class="line">    virtual_router_id <span class="number">51</span></span><br><span class="line">    priority <span class="number">50</span>  <span class="comment"># 多台安装了keepalived的机器竞争成为Master的优先级</span></span><br><span class="line">    advert_int <span class="number">1</span></span><br><span class="line">    authentication &#123;</span><br><span class="line">        <span class="attribute">auth_type</span> PASS</span><br><span class="line">        auth_pass <span class="number">1111</span></span><br><span class="line">    &#125;</span><br><span class="line">    virtual_ipaddress &#123; </span><br><span class="line">        192.168.209.200   <span class="comment">#虚拟IP</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>启动服务(机器一，二都要启动)</li></ol><figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">systemctl</span> start keepalived</span><br></pre></td></tr></table></figure><ol start="4"><li>检查状态是否报错</li></ol><figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">systemctl</span> status keepalived</span><br></pre></td></tr></table></figure><ol start="5"><li>通过命令<code>ip addr</code>查看机器一的ip信息，可以看到虚拟IP；</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/keepalived21692686301581.png" alt="keepalived"></p><p>6.本地打开dos，ping虚拟的ip <code>192.168.209.200</code>；</p><blockquote><p>现象：当主机断路的时候，丢包一次，然后自动连上备用机；</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/keepalived31692686661576.png" alt="keepalived"></p><ol start="7"><li>浏览器URL访问虚拟的ip <code>192.168.209.200</code>；</li></ol><blockquote><p>现象：正常会展示主机的nginx代理的前端文件；当主机断路的时候，展示备用机代理的前端文件；</p></blockquote><h2 id="gzip"><a href="#gzip" class="headerlink" title="gzip"></a>gzip</h2><ul><li>启用Gzip压缩功能， 可以使网站的css、js 、xml、html 等静态资源在传输时进行压缩，经过Gzip压缩后资源可以变为原来的30%甚至更小，尽管这样会消耗一定的cpu资源，但是会节约大量的出口带宽来提高访问速度；</li><li>Gzip 的压缩页面需要浏览器和服务器双方都支持，实际上就是服务器端压缩，传到浏览器后解压并解析。浏览器那里不需要我们担心，因为目前的大多数浏览器都支持解析Gzip；</li><li>注意：不建议压缩图片和大文件：图片如jpg、png文件本身就会有压缩，所以就算开启gzip后，压缩前和压缩后大小没有多大区别，所以开启了反而会白白的浪费CPU资源。（如果优化可以可以图片的生命周期设置长一点，让客户端来缓存）；</li></ul><h3 id="常用配置"><a href="#常用配置" class="headerlink" title="常用配置"></a>常用配置</h3><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="attribute">gzip</span>  <span class="literal">on</span>;   <span class="comment">#表示开启压缩功能</span></span><br><span class="line"><span class="attribute">gzip_min_length</span> <span class="number">1k</span>;  <span class="comment">#表示允许压缩的页面最小字节数，页面字节数从header头的Content-Length中获取，默认值为0，表示不管页面多大都进行压缩，设置建议设大于1k。如果小于1k可能会越压越大。</span></span><br><span class="line"><span class="attribute">gzip_buffers</span> <span class="number">16</span> <span class="number">8k</span>; <span class="comment">#压缩缓存区大小,默认32 4k,64位系统好像可以设置16 8k;</span></span><br><span class="line"><span class="attribute">gzip_http_version</span> <span class="number">1</span>.<span class="number">1</span>; <span class="comment">#使用gzip的最小版本</span></span><br><span class="line"><span class="attribute">gzip_comp_level</span> <span class="number">5</span>; <span class="comment">#压缩比率，一般选择4-6;</span></span><br><span class="line"><span class="comment">#需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片;</span></span><br><span class="line"><span class="attribute">gzip_types</span> text/xml text/css text/plain text/javascript application/json application/javascript application/x-javascript;</span><br><span class="line"><span class="comment">#是否添加“Vary: Accept-Encoding”响应头</span></span><br><span class="line"><span class="attribute">gzip_vary</span> <span class="literal">on</span>; </span><br></pre></td></tr></table></figure><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><ul><li><p><a href="https://heyingjiee.github.io/otherLanguage/Nginx%E5%AD%A6%E4%B9%A0.html">Nginx学习</a></p></li><li><p><a href="https://blog.csdn.net/weixin_43845090/article/details/108950721?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-108950721-blog-124498347.235%5Ev38%5Epc_relevant_sort_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-108950721-blog-124498347.235%5Ev38%5Epc_relevant_sort_base3&utm_relevant_index=10">nodejs-express项目部署上线</a></p></li><li><p><a href="https://www.cnblogs.com/shineman-zhang/articles/17418066.html">nginx开启Gzip压缩</a></p></li><li><p><a href="https://zhuanlan.zhihu.com/p/499294455">前端性能之gzip压缩</a></p></li><li><p><a href="https://blog.csdn.net/qq_57377057/article/details/126568841?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-4-126568841-blog-131473092.235%5Ev38%5Epc_relevant_sort_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-4-126568841-blog-131473092.235%5Ev38%5Epc_relevant_sort_base3&utm_relevant_index=7">Nginx性能优化(超详细)</a></p></li></ul>]]></content>
+        <content type="html"><![CDATA[<h2 id="正向代理与反向代理"><a href="#正向代理与反向代理" class="headerlink" title="正向代理与反向代理"></a>正向代理与反向代理</h2><ul><li><p>反向代理：服务端将请求转发给其他应用程序，比如转给Java；</p></li><li><p>正向代理：客户端使用，比如vpn；</p></li><li><p>一句话就是：正向代理代理客户端，反向代理代理服务器；</p></li></ul><h2 id="环境"><a href="#环境" class="headerlink" title="环境"></a>环境</h2><blockquote><p>win11、VMware17 Pro、CentOS Linux release 7.9.2009 (Core)，Nginx-1.24.0、静态IP：192.168.209.111、192.168.209.112、192.168.209.113、192.168.209.114；</p></blockquote><ul><li>查看centos版本</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cat /etc/redhat-release</span><br></pre></td></tr></table></figure><ul><li>关闭防火墙：</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl stop firewalld</span><br></pre></td></tr></table></figure><ul><li>重启网络服务</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl restart network</span><br></pre></td></tr></table></figure><h2 id="反向代理"><a href="#反向代理" class="headerlink" title="反向代理"></a>反向代理</h2><h3 id="代理网站"><a href="#代理网站" class="headerlink" title="代理网站"></a>代理网站</h3><figure class="highlight nginx"><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"><span class="section">location</span> / &#123;</span><br><span class="line">    <span class="attribute">proxy_pass</span> http://www.atguigu.com/;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在浏览器地址栏输入<code>192.168.209.111</code>，然后地址栏不变，但访问的是尚硅谷的网站；</p><p><img src="https://img.fsllala.top/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%8601692253825508.png" alt="nginx"></p><h3 id="代理网站，地址栏url发生改变"><a href="#代理网站，地址栏url发生改变" class="headerlink" title="代理网站，地址栏url发生改变"></a>代理网站，地址栏url发生改变</h3><figure class="highlight nginx"><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"><span class="section">location</span> / &#123;</span><br><span class="line">  <span class="attribute">proxy_pass</span>  http://www.csdn.net/;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在浏览器地址栏输入<code>192.168.209.111</code>，地址栏会变成<code>https://www.csdn.net/</code>；相当于做了一个跳转的操作，跳转到了<code>https://www.csdn.net/</code>；</p><p><img src="https://img.fsllala.top/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%861692253641507.png" alt="nginx"></p><p>原因是：目标服务器做了重定向：目标服务器告诉nginx对http协议做301的https重定向，然后nginx再告诉浏览器，最后浏览器根据Location中的地址，重新加载界面；</p><h3 id="代理网站，代理的为https"><a href="#代理网站，代理的为https" class="headerlink" title="代理网站，代理的为https"></a>代理网站，代理的为https</h3><figure class="highlight nginx"><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"><span class="section">location</span> / &#123;</span><br><span class="line">  <span class="attribute">proxy_pass</span>  https://www.csdn.net/;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>nginx报错：<code>nginx: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx.conf:18</code></p><p>不支持代理https，需要证书。</p><p>ps：好像有的nginx版本可以；</p><h2 id="负载均衡"><a href="#负载均衡" class="headerlink" title="负载均衡"></a>负载均衡</h2><blockquote><p>开了四台虚拟机，分别为：192.168.209.111，192.168.209.112、192.168.209.113、192.168.209.114；一台做nginx负载均衡，三台做服务器；</p></blockquote><h3 id="轮询"><a href="#轮询" class="headerlink" title="轮询"></a>轮询</h3><blockquote><p>轮询：负载均衡默认算法， 将请求依次分配给服务器，平均分担负载；</p></blockquote><figure class="highlight nginx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 111环境   </span></span><br><span class="line"><span class="comment">#  111的nginx做负载均衡,真正的机器有三个，分别为112、113、114;</span></span><br><span class="line"><span class="comment">#    负载均衡  fsllala是变量,需要和下面proxy_pass的保持一致;</span></span><br><span class="line"><span class="section">upstream</span> fsllala&#123;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.112:80</span>;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.113:80</span>;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.114:80</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="section">server</span> &#123;</span><br><span class="line">    <span class="attribute">listen</span>       <span class="number">80</span>;</span><br><span class="line">    <span class="attribute">server_name</span>  localhost;</span><br><span class="line"></span><br><span class="line">    <span class="section">location</span> / &#123;</span><br><span class="line">        <span class="attribute">proxy_pass</span>  http://fsllala/;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># 112/113/114环境</span></span><br><span class="line"><span class="section">location</span> / &#123;</span><br><span class="line">    <span class="attribute">root</span>    html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>现象：浏览器地址栏多次刷新访问<code>192.168.209.111</code>；112、113、114的页面交替出现；</p><h3 id="权重"><a href="#权重" class="headerlink" title="权重"></a>权重</h3><blockquote><p>在upstream中配置 weight&#x3D;xx；权重越大的访问的越多；</p></blockquote><figure class="highlight nginx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 111环境   </span></span><br><span class="line"><span class="comment">#  111的nginx做负载均衡,真正的机器有三个，分别为112、113、114;</span></span><br><span class="line"><span class="comment">#    负载均衡  fsllala是变量,需要和下面proxy_pass的保持一致;</span></span><br><span class="line"><span class="section">upstream</span> fsllala&#123;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.112:80</span> weight=<span class="number">8</span>;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.113:80</span> weight=<span class="number">2</span>;</span><br><span class="line">    <span class="attribute">server</span> <span class="number">192.168.209.114:80</span> weight=<span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="section">server</span> &#123;</span><br><span class="line">    <span class="attribute">listen</span>       <span class="number">80</span>;</span><br><span class="line">    <span class="attribute">server_name</span>  localhost;</span><br><span class="line"></span><br><span class="line">    <span class="section">location</span> / &#123;</span><br><span class="line">        <span class="attribute">proxy_pass</span>  http://fsllala/;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># 112/113/114环境</span></span><br><span class="line"><span class="section">location</span> / &#123;</span><br><span class="line">    <span class="attribute">root</span>    html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>现象：浏览器地址栏多次刷新访问<code>192.168.209.111</code>；112、113、114的页面交替出现；其中112出现的次数最多，114最少；注意<strong>并不是</strong>8次112，2次113,1次114这样的顺序来搞的，而是整体出现的概率是这样的；例如：112出现的概率为8&#x2F;(8+2+1)；</p><h2 id="动静分离"><a href="#动静分离" class="headerlink" title="动静分离"></a>动静分离</h2><blockquote><p>思路：当用户请求时，动态请求分配到Express业务服务器，静态资源请求放在Nginx服务器中；</p></blockquote><h3 id="安装node环境"><a href="#安装node环境" class="headerlink" title="安装node环境"></a>安装node环境</h3><ol><li>安装yum。yum相当于在线下载安装，yum是包管理，类似win的msi文件；</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo yum install epel-release</span><br></pre></td></tr></table></figure><ol start="2"><li>安装nodejs</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo yum install nodejs</span><br></pre></td></tr></table></figure><ol start="3"><li>安装npm(上面yum包里只有node)；</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yum install npm</span><br></pre></td></tr></table></figure><ol start="4"><li>安装pm2</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install pm2 -g</span><br></pre></td></tr></table></figure><ol start="5"><li>检查</li></ol><figure class="highlight plaintext"><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">node --version</span><br><span class="line">npm --version</span><br><span class="line">pm2 -V</span><br></pre></td></tr></table></figure><ol start="6"><li>pm2常用命令</li></ol><ul><li>启动进程&#x2F;应用：<code>pm2 start app.js</code></li><li>重命名进程&#x2F;应用：<code>pm2 start app.js --name fsl123</code></li><li>结束进程&#x2F;应用：<code> pm2 stop fsl123</code></li><li>结束所有进程&#x2F;应用：<code>pm2 stop all</code></li><li>删除进程&#x2F;应用 ：<code>pm2 delete fsl123</code></li><li>删除所有进程&#x2F;应用：<code>pm2 delete all</code></li><li>列出所有进程&#x2F;应用：<code>pm2 list</code></li><li>重新启动进程&#x2F;应用：<code>pm2 restart fsl132</code></li><li>重新启动所有进程&#x2F;应用：<code>pm2 restart all</code></li></ul><h3 id="在win11本地进行NodeJs起本地服务"><a href="#在win11本地进行NodeJs起本地服务" class="headerlink" title="在win11本地进行NodeJs起本地服务"></a>在win11本地进行NodeJs起本地服务</h3><ol><li>新建一个文件夹，然后<code>npm install express --save</code></li><li>新建一个serve.js，键入如下代码：</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PORT</span> =<span class="number">3000</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app =<span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> pubilcPath = path.<span class="title function_">resolve</span>(__dirname,<span class="string">&quot;public&quot;</span>);</span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">static</span>(pubilcPath));</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="variable constant_">PORT</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`server is running port:<span class="subst">$&#123;PORT&#125;</span>`</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ol start="3"><li><p>新建一个<code>public</code>文件夹，里面放入vue打包的代码；</p></li><li><p>将本地服务上传至centos；</p></li><li><p>在对应的目录下，通过<code>pm2 start app.js</code>启动express服务；</p></li><li><p>此时，便可以访问express起的服务<code>192.168.209.111:3000</code>；</p></li><li><p>将express服务中public文件夹下的静态文件(css，js，img)删除；现在访问会报错，因为没有对应的资源；</p></li><li><p>通过nginx代理<code>192.168.209.111:3000</code>；并且在html目录下，引入静态文件(css，js，img)；</p></li><li><p>进行如下配置代理</p></li></ol><figure class="highlight nginx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="attribute">worker_processes</span>  <span class="number">1</span>;</span><br><span class="line"><span class="section">events</span> &#123;</span><br><span class="line">    <span class="attribute">worker_connections</span>  <span class="number">1024</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="section">http</span> &#123;</span><br><span class="line">    <span class="attribute">include</span>       mime.types;</span><br><span class="line">    <span class="attribute">default_type</span>  application/octet-stream;</span><br><span class="line">    <span class="attribute">sendfile</span>        <span class="literal">on</span>;</span><br><span class="line">    <span class="attribute">keepalive_timeout</span>  <span class="number">65</span>;</span><br><span class="line"></span><br><span class="line">        <span class="section">server</span> &#123;</span><br><span class="line">        <span class="attribute">listen</span>       <span class="number">80</span>;</span><br><span class="line">        <span class="attribute">server_name</span>  localhost;</span><br><span class="line"></span><br><span class="line">        <span class="section">location</span> / &#123; <span class="comment"># /的优先级比较低，如果下面的location没匹配到，就会走http://xxx这个地址的机器</span></span><br><span class="line">           <span class="attribute">proxy_pass</span>  http://192.168.209.111:3000/;</span><br><span class="line">        &#125;</span><br><span class="line">          <span class="section">location</span> /css &#123;  <span class="comment"># root指的是html，location/css指的是root下的css，所以地址就是html/css</span></span><br><span class="line">        <span class="attribute">root</span> html;</span><br><span class="line">            <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">        &#125;</span><br><span class="line">         <span class="section">location</span> /js &#123; </span><br><span class="line">        <span class="attribute">root</span> html;</span><br><span class="line">            <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="section">location</span> /img &#123; </span><br><span class="line">        <span class="attribute">root</span> html;</span><br><span class="line">            <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="attribute">error_page</span>   <span class="number">500</span> <span class="number">502</span> <span class="number">503</span> <span class="number">504</span>  /50x.html;</span><br><span class="line">        <span class="section">location</span> = /50x.html &#123;</span><br><span class="line">            <span class="attribute">root</span>   html;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="10"><li>通过nginx代理express，并且负载均衡，访问<code>192.168.209.111:80</code>页面正常展示；(PS：这里如果访问exress服务<code>192.168.209.111:3000</code>依旧不能正常展示；)</li><li>通过正则简化如上重复代码</li></ol><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># ~* 这是一个标志，表示正则表达式匹配时不区分大小写</span></span><br><span class="line"><span class="comment"># ~  区分大小写</span></span><br><span class="line"><span class="comment"># /(js|css|img)：这部分正则表达式匹配路径中包含 js、css 或 img 这些字符串的 URL</span></span><br><span class="line"><span class="section">location</span> / &#123;</span><br><span class="line">    <span class="attribute">proxy_pass</span>  http://192.168.209.111:3000/;</span><br><span class="line">&#125;</span><br><span class="line"><span class="section">location</span> ~*/(css|js|img) &#123;  </span><br><span class="line">    <span class="attribute">root</span>   html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="URLRewrite"><a href="#URLRewrite" class="headerlink" title="URLRewrite"></a>URLRewrite</h2><blockquote><p>作用：能够隐藏真实的后端服务器的物理地址；比如真实的URL为<code>192.168.209.111/index.jsp?pageNum=2</code>，这样看上去很长，而且传的参数也暴露了；隐藏成<code>192.168.209.111/2.html</code>这种的URL；</p></blockquote><h2 id="防盗链"><a href="#防盗链" class="headerlink" title="防盗链"></a>防盗链</h2><blockquote><p>还是用上面的项目做例子：现象为：除了没有referers或者referers为192.168.209.111的，别的referers都不能引用css&#x2F;js&#x2F;img，为403；</p></blockquote><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># 给 css/js/img做防盗链</span></span><br><span class="line"><span class="section">location</span> ~*/(css|js|img) &#123;  </span><br><span class="line">    <span class="attribute">valid_referers</span> <span class="literal">none</span> <span class="number">192.168.209.111</span>; <span class="comment"># 允许访问的(没有referers或者referers为192.168.209.111)</span></span><br><span class="line">    <span class="attribute">if</span> (<span class="variable">$invalid_referer</span>)&#123;<span class="comment">#无效的</span></span><br><span class="line">        <span class="attribute">return</span> <span class="number">403</span>;<span class="comment">#返回状态码403</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attribute">root</span> html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>在newTab页单独打开css&#x2F;js&#x2F;img，跳转到自定义界面；</li></ul><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="section">location</span> ~*/(css|js|img) &#123;  </span><br><span class="line">    <span class="attribute">valid_referers</span>  <span class="number">192.168.209.111</span>;</span><br><span class="line">    <span class="attribute">if</span> (<span class="variable">$invalid_referer</span>)&#123;<span class="comment">#无效的</span></span><br><span class="line">        <span class="attribute">return</span> <span class="number">403</span>;<span class="comment">#返回状态码403</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attribute">root</span> html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="attribute">error_page</span>   <span class="number">403</span> <span class="number">500</span> <span class="number">502</span> <span class="number">503</span> <span class="number">504</span>  /50x.html;  <span class="comment">#在这里将防盗链中的状态码403填入;</span></span><br><span class="line"><span class="section">location</span> = /50x.html &#123;</span><br><span class="line">    <span class="attribute">root</span>   html;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>设置防盗链图片</li></ul><blockquote><p>将提示图片放在html&#x2F;img&#x2F;cc.jpg，访问设置防盗链图片时，就返回这cc.jpg张图；</p><p>现象：原来的html页面上，不会向之前的防盗链一样图片裂开，而是展示设置的防盗链图片；</p></blockquote><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="section">location</span> /img&#123;</span><br><span class="line">    <span class="attribute">valid_referers</span> <span class="number">192.168.209.111</span>;</span><br><span class="line">    <span class="attribute">if</span> (<span class="variable">$invalid_referer</span>)&#123;<span class="comment">#无效的</span></span><br><span class="line">        <span class="attribute">rewrite</span><span class="regexp"> ^/</span>  /img/cc.jpg <span class="literal">break</span>; <span class="comment">#这里跟URLRewrite写法一样;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attribute">root</span> html;</span><br><span class="line">    <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="高可用场景"><a href="#高可用场景" class="headerlink" title="高可用场景"></a>高可用场景</h2><h3 id="keepalived"><a href="#keepalived" class="headerlink" title="keepalived"></a>keepalived</h3><blockquote><p>用户访问时，访问的是一个虚拟IP，keepalived会选定一个主服务器使用这个虚拟IP；</p><p>每台机器上的keepalived会相互通信，根据其他机器上的keepalived进程是否存在，判断服务器状态，如果默认的Master停止了，就会在剩下的Backup机器中，竞选出一台Nginx服务器作为Master；</p></blockquote><p><img src="https://img.fsllala.top/keepalived1692685358576.png" alt="keepalived"></p><ol><li>yum安装</li></ol><figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">yum</span> install keepalived</span><br></pre></td></tr></table></figure><ol start="2"><li>修改keepalived配置</li></ol><ul><li>配置文件在<code>/etc/keepalived/keepalived.conf</code>；</li><li><code>vrrp_instance</code>、<code>authentication</code>、<code>virtual_router_id</code>、<code>virtual_ipaddress</code>这几个一样的机器，才算是同一个组里。这个组才会选出一个作为Master机器；</li><li>这里我们设置两台机器，分别下载好keepalived，然后进行配置；</li><li>机器一：192.168.209.111</li></ul><figure class="highlight nginx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">! <span class="attribute">Configuration</span> File for keepalived</span><br><span class="line"></span><br><span class="line">global_defs &#123;</span><br><span class="line">   <span class="attribute">router_id</span> fsl111  <span class="comment"># 名字与其他配置了keepalive的机器不重复就行</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">vrrp_instance fsllala111 &#123;  <span class="comment">#vrrp实例名可以随意取</span></span><br><span class="line">    <span class="attribute">state</span> MASTER  <span class="comment">#只能有一个默认的Master，其他写BACKUP</span></span><br><span class="line">    interface ens33  <span class="comment"># ip addr查看下网卡名，默认时ens33</span></span><br><span class="line">    virtual_router_id <span class="number">51</span></span><br><span class="line">    priority <span class="number">100</span>  <span class="comment"># 多台安装了keepalived的机器竞争成为Master的优先级</span></span><br><span class="line">    advert_int <span class="number">1</span></span><br><span class="line">    authentication &#123;</span><br><span class="line">        <span class="attribute">auth_type</span> PASS</span><br><span class="line">        auth_pass <span class="number">1111</span></span><br><span class="line">    &#125;</span><br><span class="line">    virtual_ipaddress &#123;</span><br><span class="line">        192.168.209.200 <span class="comment">#虚拟IP</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>机器二：192.168.209.100</li></ul><figure class="highlight nginx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">! <span class="attribute">Configuration</span> File for keepalived</span><br><span class="line"></span><br><span class="line">global_defs &#123;</span><br><span class="line">   <span class="attribute">router_id</span> fsl100</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">vrrp_instance fsllala111 &#123;</span><br><span class="line">    <span class="attribute">state</span> BACKUP   <span class="comment">#只能有一个默认的Master，其他写BACKUP</span></span><br><span class="line">    interface ens33</span><br><span class="line">    virtual_router_id <span class="number">51</span></span><br><span class="line">    priority <span class="number">50</span>  <span class="comment"># 多台安装了keepalived的机器竞争成为Master的优先级</span></span><br><span class="line">    advert_int <span class="number">1</span></span><br><span class="line">    authentication &#123;</span><br><span class="line">        <span class="attribute">auth_type</span> PASS</span><br><span class="line">        auth_pass <span class="number">1111</span></span><br><span class="line">    &#125;</span><br><span class="line">    virtual_ipaddress &#123; </span><br><span class="line">        192.168.209.200   <span class="comment">#虚拟IP</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>启动服务(机器一，二都要启动)</li></ol><figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">systemctl</span> start keepalived</span><br></pre></td></tr></table></figure><ol start="4"><li>检查状态是否报错</li></ol><figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">systemctl</span> status keepalived</span><br></pre></td></tr></table></figure><ol start="5"><li>通过命令<code>ip addr</code>查看机器一的ip信息，可以看到虚拟IP；</li></ol><p><img src="https://img.fsllala.top/keepalived21692686301581.png" alt="keepalived"></p><p>6.本地打开dos，ping虚拟的ip <code>192.168.209.200</code>；</p><blockquote><p>现象：当主机断路的时候，丢包一次，然后自动连上备用机；</p></blockquote><p><img src="https://img.fsllala.top/keepalived31692686661576.png" alt="keepalived"></p><ol start="7"><li>浏览器URL访问虚拟的ip <code>192.168.209.200</code>；</li></ol><blockquote><p>现象：正常会展示主机的nginx代理的前端文件；当主机断路的时候，展示备用机代理的前端文件；</p></blockquote><h2 id="gzip"><a href="#gzip" class="headerlink" title="gzip"></a>gzip</h2><ul><li>启用Gzip压缩功能， 可以使网站的css、js 、xml、html 等静态资源在传输时进行压缩，经过Gzip压缩后资源可以变为原来的30%甚至更小，尽管这样会消耗一定的cpu资源，但是会节约大量的出口带宽来提高访问速度；</li><li>Gzip 的压缩页面需要浏览器和服务器双方都支持，实际上就是服务器端压缩，传到浏览器后解压并解析。浏览器那里不需要我们担心，因为目前的大多数浏览器都支持解析Gzip；</li><li>注意：不建议压缩图片和大文件：图片如jpg、png文件本身就会有压缩，所以就算开启gzip后，压缩前和压缩后大小没有多大区别，所以开启了反而会白白的浪费CPU资源。（如果优化可以可以图片的生命周期设置长一点，让客户端来缓存）；</li></ul><h3 id="常用配置"><a href="#常用配置" class="headerlink" title="常用配置"></a>常用配置</h3><figure class="highlight nginx"><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></pre></td><td class="code"><pre><span class="line"><span class="attribute">gzip</span>  <span class="literal">on</span>;   <span class="comment">#表示开启压缩功能</span></span><br><span class="line"><span class="attribute">gzip_min_length</span> <span class="number">1k</span>;  <span class="comment">#表示允许压缩的页面最小字节数，页面字节数从header头的Content-Length中获取，默认值为0，表示不管页面多大都进行压缩，设置建议设大于1k。如果小于1k可能会越压越大。</span></span><br><span class="line"><span class="attribute">gzip_buffers</span> <span class="number">16</span> <span class="number">8k</span>; <span class="comment">#压缩缓存区大小,默认32 4k,64位系统好像可以设置16 8k;</span></span><br><span class="line"><span class="attribute">gzip_http_version</span> <span class="number">1</span>.<span class="number">1</span>; <span class="comment">#使用gzip的最小版本</span></span><br><span class="line"><span class="attribute">gzip_comp_level</span> <span class="number">5</span>; <span class="comment">#压缩比率，一般选择4-6;</span></span><br><span class="line"><span class="comment">#需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片;</span></span><br><span class="line"><span class="attribute">gzip_types</span> text/xml text/css text/plain text/javascript application/json application/javascript application/x-javascript;</span><br><span class="line"><span class="comment">#是否添加“Vary: Accept-Encoding”响应头</span></span><br><span class="line"><span class="attribute">gzip_vary</span> <span class="literal">on</span>; </span><br></pre></td></tr></table></figure><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><ul><li><p><a href="https://heyingjiee.github.io/otherLanguage/Nginx%E5%AD%A6%E4%B9%A0.html">Nginx学习</a></p></li><li><p><a href="https://blog.csdn.net/weixin_43845090/article/details/108950721?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-108950721-blog-124498347.235%5Ev38%5Epc_relevant_sort_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-108950721-blog-124498347.235%5Ev38%5Epc_relevant_sort_base3&utm_relevant_index=10">nodejs-express项目部署上线</a></p></li><li><p><a href="https://www.cnblogs.com/shineman-zhang/articles/17418066.html">nginx开启Gzip压缩</a></p></li><li><p><a href="https://zhuanlan.zhihu.com/p/499294455">前端性能之gzip压缩</a></p></li><li><p><a href="https://blog.csdn.net/qq_57377057/article/details/126568841?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-4-126568841-blog-131473092.235%5Ev38%5Epc_relevant_sort_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-4-126568841-blog-131473092.235%5Ev38%5Epc_relevant_sort_base3&utm_relevant_index=7">Nginx性能优化(超详细)</a></p></li></ul>]]></content>
       
       
       <categories>
@@ -110,7 +110,7 @@
       <link href="/articles/3ef665a6.html"/>
       <url>/articles/3ef665a6.html</url>
       
-        <content type="html"><![CDATA[<h2 id="调研背景"><a href="#调研背景" class="headerlink" title="调研背景"></a>调研背景</h2><blockquote><p>公司项目打算采用HTTPS来保证数据的安全性。在计划零成本的前提下，看是否可以实现HTTPS。</p></blockquote><h2 id="HTTP与HTTPS区别"><a href="#HTTP与HTTPS区别" class="headerlink" title="HTTP与HTTPS区别"></a>HTTP与HTTPS区别</h2><ul><li>数据加密：HTTPS 使用 SSL&#x2F;TLS 协议对传输数据进行加密，使得第三方无法窃取数据内容。HTTP 传输的数据是明文，容易被黑客窃取和篡改。</li><li>数据完整性：在数据传输过程中，HTTPS 使用消息认证码（MAC）校验数据完整性，如果数据被篡改或者损坏，在传输过程中会被损坏。</li><li>身份验证：HTTPS 使用证书机制来验证网络通信的双方身份，加强了验证的强度和客户端和服务器之间的信任。HTTP 没有身份验证机制，容易遭受中间人攻击。</li></ul><blockquote><p>HTTPS 并不是一种新的协议，我们可以理解为HTTPS协议 &#x3D; HTTP协议 + SSL&#x2F;TLS协议。通常来说，HTTP 是直接和 TCP 进行通信的。当我们使用  SSL&#x2F;TLS 时，会变成先和  SSL&#x2F;TLS 通信，然后再由  SSL&#x2F;TLS 和 TCP 进行通信。</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/https.png" alt="https"></p><h2 id="SSL-x2F-TLS"><a href="#SSL-x2F-TLS" class="headerlink" title="SSL&#x2F;TLS"></a>SSL&#x2F;TLS</h2><blockquote><p>SSL（Secure Sockets Layer）和 TLS（Transport Layer Security）都是网络通信中的加密协议，它们的主要目的是在网络通信中保护传输数据的机密性和完整性。SSL是TLS的前身，TLS是SSL的升级版，这两者之间的区别如下：</p></blockquote><ul><li>名称： SSL是早期加密协议的名称，后来被TLS所取代。目前常用的是TLS协议。</li><li>历史：SSL协议是在1995年由Netscape开发的。随着时间的推移，SSL逐渐被其他安全协议所取代。TLS是SSL的继任者，旨在改进SSL协议中的一些安全问题。TLS协议于1999年发布，TLS 1.0成为Internet工程任务组（IETF）的正式标准。</li><li>版本：SSL协议共有三个版本，分别为SSL 1.0、SSL 2.0和SSL 3.0，但是SSL 2.0存在一些安全性问题，并且被证明不可靠，已经不再使用。TLS协议目前有四个版本，分别为TLS 1.0、TLS 1.1、TLS 1.2和TLS 1.3。</li><li>安全性：TLS协议比SSL协议更加安全，因为TLS协议改进了一些SSL协议中的安全问题。例如，TLS协议使用更强的加密算法，可以保护数据传输的安全性，并防止中间人攻击。TLS 1.3版本还可以提高握手过程的效率，并提供更好的安全保障。</li><li>应用：SSL和TLS协议都可以用于加密HTTP请求，从而保护用户数据的安全性。HTTPS（HTTP over SSL&#x2F;TLS）是使用SSL或TLS协议加密的HTTP请求。</li></ul><p>总之，SSL和TLS协议都是用于在网络上保护数据传输的安全性的加密协议。虽然SSL协议已经不再使用，但TLS协议已经取代了SSL协议，并成为了现代互联网上加密通信的标准。</p><p>注：可以F12，选择Security进行查看单管网站所用的版本；</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/tlsVersion.png" alt="tlsVersion"></p><h2 id="证书颁发机构（CA）"><a href="#证书颁发机构（CA）" class="headerlink" title="证书颁发机构（CA）"></a>证书颁发机构（CA）</h2><ul><li><p>证书颁发机构（Certificate Authority，CA）是一种受信任的第三方实体，它负责验证数字证书中的信息，并将其绑定到公钥上，从而帮助确保证书的真实性和完整性。</p></li><li><p>数字证书是一种用于加密通信和保护数据完整性的安全证书。数字证书包含一个公钥和与该公钥相关联的信息，例如证书的所有者和有效期。当客户端连接到一个使用SSL&#x2F;TLS协议保护的服务时，服务器会向客户端发送一个数字证书，以证明自己的身份和服务器的公钥。</p></li><li><p>在数字证书中，公钥由证书颁发机构签名，以验证证书中的信息的真实性和完整性。因此，证书颁发机构是数字证书中非常重要的一个组成部分，它为证书的真实性和完整性提供了保障。</p></li><li><p>通过使用受信任的证书颁发机构签名的数字证书，客户端可以确信服务器的身份，从而可以信任与服务器之间的通信。在Web浏览器中，浏览器会预装一组受信任的证书颁发机构，以验证访问的网站的证书是否有效。如果证书不是由受信任的证书颁发机构签发的，浏览器就会发出警告，提示用户访问的网站可能不安全。</p></li></ul><h2 id="mkcert"><a href="#mkcert" class="headerlink" title="mkcert"></a>mkcert</h2><blockquote><p><a href="https://github.com/FiloSottile/mkcert">mkcert</a>  是一个用于制作本地可信任开发证书的简单工具，不需要配置。</p><p>使用来自真实证书颁发机构 (CA) 的证书进行开发可能是危险的或不可能的（对于主机，如<code>example.test</code>,<code>localhost</code>或<code>127.0.0.1</code>），但<strong>自签名证书</strong>会导致信任错误。</p><p>mkcert 自动在系统根存储中创建并安装本地 CA，并生成本地信任的证书。</p></blockquote><h2 id="Let’s-Encrypt"><a href="#Let’s-Encrypt" class="headerlink" title="Let’s Encrypt"></a>Let’s Encrypt</h2><ul><li>Let’s Encrypt是国外一个公共的免费SSL项目，由 Linux 基金会托管，由Mozilla、思科、Akamai、IdenTrust和EFF等组织发起，<strong>靠谱！</strong></li><li>Let’s Encrypt安装部署简单、方便，目前Cpanel、Oneinstack等面板都已经集成了Let’s Encrypt一键申请安装，<strong>简单！</strong></li><li>Let’s Encrypt证书<strong>有效期三个月</strong>，每三个月需要续签证书 <a href="https://letsencrypt.org/2015/11/09/why-90-days.html">see why</a> </li><li>Let’s Encrypt注册主域名<strong>认证频率</strong>20个&#x2F;周，同一域名重复认证 5次&#x2F;周 <a href="https://letsencrypt.org/docs/rate-limits/">see more</a></li><li>Let’s Encrypt不支持绑定IP，只能绑定域名，域名需可以在公共 Internet 上被访问到</li></ul><h2 id="mkcert与Let’s-Encrypt区别"><a href="#mkcert与Let’s-Encrypt区别" class="headerlink" title="mkcert与Let’s Encrypt区别"></a>mkcert与Let’s Encrypt区别</h2><ul><li>认证机构：Let’s Encrypt是一个公共的免费认证机构，可以为任何人免费签发SSL证书。与之相反，mkcert是一个自签名证书工具，它创建的证书只能用于开发和测试目的。</li><li>证书的有效期：Let’s Encrypt签发的证书的有效期为90天。在证书即将过期时，您可以自动更新证书。相反，mkcert默认情况下签发的证书有效期为2年，需要手动更新证书。</li><li>使用场景：Let’s Encrypt适用于需要为公共访问的网站签发证书的情况，例如在线商店、社交媒体等。而mkcert适用于开发和测试环境中使用，例如本地开发机器、测试环境等。</li><li>验证方式：Let’s Encrypt使用ACME协议来验证证书请求者的身份。ACME是一种自动化的验证协议，需要您在域名系统中创建一个特殊的DNS记录或在您的Web服务器上放置一个特殊的文件。ACME协议将验证这些信息，以确定您对域名或服务器的控制权；相反，mkcert使用本地证书颁发机构（CA）来签署证书，因此只能用于本地开发环境和测试环境。当您安装mkcert时，它将在您的计算机上创建一个本地CA，并将其添加到操作系统的信任列表中。这使得mkcert能够签署您本地环境中的SSL证书，而无需进行任何验证。</li><li>配置和使用：使用Let’s Encrypt需要您安装ACME客户端，并将其配置为与您的Web服务器配合使用。您还需要将域名解析为您的Web服务器，并公开暴露您的服务器以接受来自Let’s Encrypt的验证请求。相反，使用mkcert只需要在您的计算机上安装它，并使用它来生成证书。由于mkcert是自签名的，您无需将域名解析为Web服务器或公开暴露Web服务器以进行验证。您可以使用mkcert在本地生成SSL证书，并将其用于开发和测试目的。</li><li>安全性：Let’s Encrypt签发的证书使用公共密钥加密技术，可以提供与任何其他公共CA颁发的证书相同的安全保障。它还提供了TLSA记录，可防止DNS中间人攻击。由于mkcert是自签名的，因此不能提供与公共CA颁发的证书相同的安全保障。它仅适用于开发和测试环境，并不适合用于公共网站。但是，在本地环境中使用mkcert仍然比在未加密的HTTP连接上运行应用程序要更安全。</li></ul><p>总结：如果您需要在公共网站上使用SSL证书，建议使用Let’s Encrypt，因为Let’s Encrypt是一个针对公共网站的免费证书颁发机构。而如果您只是在开发和测试环境中使用SSL证书，则建议使用mkcert，因为mkcert则是一个针对本地开发和测试环境的工具，用于快速创建自签名的SSL证书。</p><h2 id="关于IP绑定"><a href="#关于IP绑定" class="headerlink" title="关于IP绑定"></a>关于IP绑定</h2><h3 id="Let’s-Encrypt-1"><a href="#Let’s-Encrypt-1" class="headerlink" title="Let’s Encrypt"></a>Let’s Encrypt</h3><blockquote><p>Let’s Encrypt不支持绑定IP地址，它只能绑定域名。Let’s Encrypt是一个免费的公共SSL证书颁发机构，它的证书是基于域名颁发的。在颁发证书时，Let’s Encrypt需要验证域名的所有权和控制权，而不能验证IP地址的所有权和控制权。因此，如果您想使用Let’s Encrypt证书保护您的网站，您必须使用域名来访问您的网站，而不能使用IP地址。如果您的网站必须使用IP地址来访问，您可以考虑使用其他证书颁发机构颁发的证书，这些机构可能支持使用IP地址来验证证书的所有权和控制权。</p></blockquote><h3 id="mkcert-1"><a href="#mkcert-1" class="headerlink" title="mkcert"></a>mkcert</h3><blockquote><p>mkcert不支持直接绑定IP地址，因为SSL&#x2F;TLS证书的设计是基于域名而非IP地址的。然而，您可以通过使用一个本地的域名解析器，例如 <code>dnsmasq</code>，来将您的IP地址映射到一个本地的域名上。这样，您可以在本地使用这个域名来访问您的服务，然后使用mkcert来为这个域名生成SSL&#x2F;TLS证书。生成的证书将会包含这个本地的域名，而不是您的IP地址。请注意，这种方法只适用于本地开发和测试，因为这个本地的域名不能被公共的DNS服务器解析。如果您需要在公共网络上使用SSL&#x2F;TLS证书来保护您的服务，您必须使用一个真实的域名，并将它绑定到您的IP地址上。</p></blockquote><h2 id="开发环境"><a href="#开发环境" class="headerlink" title="开发环境"></a>开发环境</h2><blockquote><p>win11，node(v16.18.0)、<a href="http://nginx.org/en/download.html"> nginx&#x2F;Windows-1.24.0</a></p></blockquote><h2 id="内网HTTPS-free"><a href="#内网HTTPS-free" class="headerlink" title="内网HTTPS(free)"></a>内网HTTPS(free)</h2><blockquote><p>综上所述，内网HTTPS采用mkcert进行开发。</p></blockquote><ol><li>mkcert下载：<a href="https://github.com/FiloSottile/mkcert/releases/tag/v1.4.4">下载链接</a></li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step1.png" alt="mkcert_step1"></p><ol start="2"><li>生成CA（certificate authority，即证书颁发机构）：输入cmd，初次安装mkcert</li></ol><p>输入<code>mkcert-v1.4.4-windows-amd64 -install</code> 命令 ，安装mkcert。将CA证书加入本地可信CA，使用此命令，就能帮助我们将mkcert使用的根证书加入了本地可信CA中，以后由该CA签发的证书在本地都是可信的。卸载命令 <code>mkcert-v1.4.4-windows-amd64 -uninstall</code></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step2.png" alt="mkcert_step2"></p><ol start="3"><li>安装成功，提示创建一个新的本地CA，本地CA现在已安装在系统信任存储中。</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step3.png" alt="mkcert_step3"></p><ol start="4"><li>测试mkcert是否安装成功</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step4.png" alt="mkcert_step4"></p><ol start="5"><li>查看CA证书存放位置</li></ol><p>输入<code>mkcert-v1.4.4-windows-amd64.exe -CAROOT</code>命令</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step5.png" alt="mkcert_step5"></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step5_1.png" alt="mkcert_step5_1"></p><p>按“Windows键+R”调出运行框，输入certmgr.msc命令。打开证书控制台。</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step5_2.png" alt="mkcert_step5_2"></p><ol start="6"><li>生成自签证书,可供局域网内使用其他主机访问。</li></ol><ul><li><p>直接跟多个要签发的域名或 ip 就行了，比如签发一个仅本机访问的证书(可以通过127.0.0.1和localhost，以及 ipv6 地址::1访问)</p></li><li><p>需要在局域网内测试 https 应用，这种环境可能不对外，因此也无法使用像Let’s encrypt这种免费证书的方案给局域网签发一个可信的证书，而且Let’s encrypt本身也不支持认证 Ip。</p></li><li><p>证书可信的三个要素：</p><ul><li>由可信的 CA 机构签发；</li><li>访问的地址跟证书认证地址相符；</li><li>证书在有效期内；</li></ul></li><li><p>如果期望自签证书在局域网内使用，以上三个条件都需要满足。很明显自签证书一定可以满足证书在有效期内，那么需要保证前两条。我们签发的证书必须匹配浏览器的地址栏，比如局域网的 ip 或者域名，此外还需要信任 CA。操作如下：</p></li></ul><blockquote><p>创建自签名证书，例如要为域名：<code>fsllala.philisense.com</code>(随便输入的域名)和IP：<code>127.0.0.1 </code>、<code>192.168.11.242</code>(本机IP)创建证书，可以使用如下的命令</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mkcert-v1<span class="number">.4</span><span class="number">.4</span>-windows-amd64.<span class="property">exe</span> <span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span> <span class="number">192.168</span><span class="number">.11</span><span class="number">.242</span> fsllala.<span class="property">philisense</span>.<span class="property">com</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step6.png" alt="mkcert_step6"></p><p>在mkcert软件同目录下，生成了自签证书。如图所示。</p><blockquote><p>上述命令会自动使用第2步创建的CA生成证书文件，其中<code>xxx.pem</code>为证书，<code>xxx-key.pem</code>为私钥。生成了证书和私钥以后，就可以在web服务器开启https了。</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step6_1.png" alt="mkcert_step6_1"></p><ol start="7"><li>通过nginx搭建web服务器并开启https</li></ol><figure class="highlight js"><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"><span class="comment">//nginx常用命令</span></span><br><span class="line">start nginx 开启</span><br><span class="line">nginx -s stop 停止</span><br><span class="line">nginx -s reload 重新加载</span><br></pre></td></tr></table></figure><p>修改nginx.conf文件中的证书和私钥的路径，别的暂时不做修改。<img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step7.png" alt="mkcert_step7"></p><p>进入nginx文件夹，开启nginx</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step7_1.png" alt="mkcert_step7_1"></p><ol start="8"><li>访问搭建的服务</li></ol><p>通过步骤6配置的IP进行访问，这里经测试，目前127.0.0.1:443和fsllala.philisense.com:443目前不能访问。</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step8.png" alt="mkcert_step8"></p><p>将vue项目通过<code>npm run build</code>进行打包，然后将dist文件下中的打包文件放到nginx的html目录中</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step8_1.png" alt="mkcert_step8_1"></p><p>再次通过步骤6配置的IP进行访问</p><p>注：这里可能会遇到<code>Invalid Host header</code>的错误，<a href="https://www.cnblogs.com/z937741304/p/10536237.html">解决方法</a></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step8_2.png" alt="mkcert_step8_2"></p><blockquote><p>这里可以看到警告，意思大概为：请求并未升级到https，因为访问地址是ip地址，应该采用域名进行https访问。</p></blockquote><ol start="9"><li>本地开发指定 Host</li></ol><p>因为网上没有特定的概念词语，因此我这边总结的标题是本地开发指定 Host，但其实简单点就是：<code>localhost -&gt; devlopment.com</code>。</p><p>通过win+R，然后输入<code>C:\Windows\System32\drivers\etc</code>，可以找到hosts文件</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step9.png" alt="mkcert_step9"></p><p>然后将步骤6中的域名与本地ip进行映射</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step9_1.png" alt="mkcert_step9_1"></p><p>稍等片刻，然后进行域名访问(这里不能挂代理，不然会访问不了)，可以看到，没有上面IP的提示了。</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step9_2.png" alt="mkcert_step9_2"></p><ol start="10"><li>此时用局域网的<strong>另一台电脑</strong>进行访问，通过<code>https://192.168.11.242/#/</code>可以进行访问，通过<code>https://fsllala.philisense.com/#/</code>不能进行访问。</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/unsafe.png"></p><p>可以看到另一台电脑上显示此证书是不安全的，因为我们用的证书是自签的，而不是公认的CA。我们需要将第2步产生的CA：</p><p><code>rootCA-key.pem</code> 和 <code>rootCA.pem</code>，将 <code>rootCA.pem</code> 复制到 另一台PC 上，并将其后缀改为 <code>.crt</code>。</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/rootCA.webp" alt="rootCA"></p><p>双击 <code>rootCA.crt</code>，根据提示安装证书，步骤如下：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/rootCA_install.webp" alt="rootCA_install"></p><p>重启浏览器再次访问，可以看到连接已经变为安全。</p><ol start="11"><li>另一台机器使用域名进行访问</li></ol><p>同搭建环境的机器一样，在另一台机器上，也需要本地开发指定 Host，即：<code>192.168.11.242 fsllala.philisense.com</code>，然后稍等片刻，即可进行访问。(步骤10解决了HTTPS不信任的问题)</p><ol start="12"><li>接口全部不能通信</li></ol><p>因为HTTP和HTTPS是两个不同的协议，所以两者不能进行通信。项目虽然是HTTPS了，但是接口都噶了，肯定是不行的，所以需要通过nginx进行接口的代理，将原来的HTTP接口，反向代理成HTTPS接口。</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step12.png" alt="mkcert_step12"></p><ol start="13"><li>反向代理 接口HTTP为HTTPS，WS为WSS</li></ol><p>因为项目用到了HTTP和WS，所以都需要进行代理：以下代码意思为：接口中带有<code>/fsl/</code>的都会走<code>http://192.168.13.102:9003/</code>代理</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">server &#123;</span><br><span class="line">   listen       <span class="number">443</span> ssl;</span><br><span class="line">   server_name  localhost;</span><br><span class="line"></span><br><span class="line">#    ssl_certificate      cert.<span class="property">pem</span>;</span><br><span class="line">#    ssl_certificate_key  cert.<span class="property">key</span>;</span><br><span class="line">   #证书</span><br><span class="line">   ssl_certificate /mkcert2/<span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span>+<span class="number">2.</span>pem;</span><br><span class="line">   #私钥</span><br><span class="line">   ssl_certificate_key /mkcert2/<span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span>+<span class="number">2</span>-key.<span class="property">pem</span>;</span><br><span class="line"></span><br><span class="line">   ssl_session_cache    <span class="attr">shared</span>:<span class="attr">SSL</span>:1m;</span><br><span class="line">   ssl_session_timeout  5m;</span><br><span class="line"></span><br><span class="line">   ssl_ciphers  <span class="attr">HIGH</span>:!<span class="attr">aNULL</span>:!<span class="title class_">MD5</span>;</span><br><span class="line">   ssl_prefer_server_ciphers  on;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">location /fsl/ &#123;</span><br><span class="line"># root   html;</span><br><span class="line"># index  index.<span class="property">html</span> index.<span class="property">htm</span>;</span><br><span class="line">    proxy_pass <span class="attr">http</span>:<span class="comment">//192.168.13.102:9003/; #现接口地址</span></span><br><span class="line"></span><br><span class="line"># websocket</span><br><span class="line"># proxy_pass <span class="attr">http</span>:<span class="comment">//192.168.13.102:9003/;  #websocket服务器</span></span><br><span class="line">proxy_http_version <span class="number">1.1</span>;</span><br><span class="line">proxy_set_header <span class="title class_">Upgrade</span> $http_upgrade;</span><br><span class="line">proxy_set_header <span class="title class_">Connection</span> <span class="string">&quot;upgrade&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">   location / &#123;</span><br><span class="line">       root   html;</span><br><span class="line">       index  index.<span class="property">html</span> index.<span class="property">htm</span>;</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step13.png" alt="mkcert_step13"></p><p>然后将vue项目中的接口服务地址和协议进行修改，如下图所示：</p><blockquote><p>需要修改IP，https&#x2F;wss、端口号、进行nginx代理的关键字(&#x2F;fsl&#x2F;)</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step13_1.png" alt="mkcert_step13_1"></p><p>然后将vue进行打包，放到nginx下的html目录下；nginx通过<code>nginx -s reload</code>进行重新加载。</p><ol start="14"><li>通过上述映射的域名(<a href="https://fsllala.philisense.com)进行访问/">https://fsllala.philisense.com)进行访问</a></li></ol><p>可能会出现一些图片&#x2F;标乱码的情况，关闭浏览器，重新打开即可。</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step14.png" alt="mkcert_step14"></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mkcert_step14_1.png" alt="mkcert_step14_1"></p><p>可以看到，此时接口(http、ws)均进行了代理，可以进行正常的访问。</p><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul><li>虽然可以将 SSL&#x2F;TLS 证书与 IP 地址绑定，但出于安全和兼容性考虑，建议尽可能使用域名来保护您的应用程序；</li><li>使用mkcert可以进行内网的https，但是局域网内的另一台PC，会显示此https不安全，需要安装CA根证书解决不安全的问题；</li><li>局域网的另一台PC，同搭建环境PC一样，不能直接通过映射的域名进行访问，需要修改host进行域名映射。</li></ul><h2 id="外网HTTPS"><a href="#外网HTTPS" class="headerlink" title="外网HTTPS"></a>外网HTTPS</h2><blockquote><p>外网免费HTTPS是不能绑定IP的，无论是上面提及的Let’s Encrypt，还是腾讯云，阿里云等。</p></blockquote><h3 id="腾讯云"><a href="#腾讯云" class="headerlink" title="腾讯云"></a>腾讯云</h3><p><a href="https://cloud.tencent.com/document/product/400/89868">免费SSL</a></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/tencentSSL.png" alt="tencentSSL"></p><h3 id="阿里云"><a href="#阿里云" class="headerlink" title="阿里云"></a>阿里云</h3><p><a href="https://help.aliyun.com/document_detail/205510.html?spm=5176.21213303.J_6704733920.9.411353c9TKatgq&scm=20140722.S_help@@%E6%96%87%E6%A1%A3@@205510._.ID_help@@%E6%96%87%E6%A1%A3@@205510-RL_%E5%85%8D%E8%B4%B9ssl%E8%AF%81%E4%B9%A6-LOC_main-OR_ser-V_2-RK_rerank-P0_0">免费SSL</a></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/aliSSL.png" alt="aliSSL"></p><h2 id="相关文献"><a href="#相关文献" class="headerlink" title="相关文献"></a>相关文献</h2><ul><li><a href="https://blog.csdn.net/qq_34375473/article/details/122310838">为什么 HTTPS 比 HTTP 更安全？HTTPS 如何保证数据传输安全性</a></li><li><a href="https://blog.csdn.net/qq_36631580/article/details/126272277?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-126272277-blog-122310838.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-126272277-blog-122310838.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&utm_relevant_index=6">HTTPS为什么是安全的</a></li><li><a href="https://juejin.cn/post/7141308011921801223#heading-0">前端本地开发指定域名以及 HTTPS 配置方案</a></li><li><a href="https://zhuanlan.zhihu.com/p/379501905">mkcert 使用指南：如何快速创建自签名 SSL 证书</a></li><li><a href="https://xybdiy.blog.csdn.net/article/details/119676301?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-119676301-blog-128340862.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-119676301-blog-128340862.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&utm_relevant_index=5&ydreferer=aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MTE4MDcxL2FydGljbGUvZGV0YWlscy8xMjgzNDA4NjI/c3BtPTEwMDEuMjEwMS4zMDAxLjY2NTAuNCZ1dG1fbWVkaXVtPWRpc3RyaWJ1dGUucGNfcmVsZXZhbnQubm9uZS10YXNrLWJsb2ctMiU3RWRlZmF1bHQlN0VDVFJMSVNUJTdFUmF0ZS00LTEyODM0MDg2Mi1ibG9nLTEyMzE2MDM1Ny4yMzUlNUV2MzIlNUVwY19yZWxldmFudF9pbmNyZWF0ZV90MF9kb3dubG9hZF92Ml9iYXNlJmRlcHRoXzEtdXRtX3NvdXJjZT1kaXN0cmlidXRlLnBjX3JlbGV2YW50Lm5vbmUtdGFzay1ibG9nLTIlN0VkZWZhdWx0JTdFQ1RSTElTVCU3RVJhdGUtNC0xMjgzNDA4NjItYmxvZy0xMjMxNjAzNTcuMjM1JTVFdjMyJTVFcGNfcmVsZXZhbnRfaW5jcmVhdGVfdDBfZG93bmxvYWRfdjJfYmFzZSZ1dG1fcmVsZXZhbnRfaW5kZXg9Ng==">使用mkcert工具生成受信任的SSL证书，解决局域网本地https访问问题</a></li><li><a href="https://blog.zwying.com/archives/51.html">windows使用mkcert配置本地https环境</a></li><li><a href="https://www.bilibili.com/read/cv19764245">本地 https 环境解决方案</a></li><li><a href="https://juejin.cn/post/6844903834272153613">使用mkcert创建自签名证书</a></li><li><a href="https://www.cnblogs.com/z937741304/p/10536237.html">解决Invalid Host header问题</a></li><li><a href="https://youyongba.github.io/doc/html/mkcert/">mkcert + nginx 搭建https</a></li><li><a href="https://blog.csdn.net/weixin_38242293/article/details/112214657?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-112214657-blog-128340862.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&spm=1001.2101.3001.4242.2&utm_relevant_index=4">window使用mkcert，nginx的配置https证书</a></li><li><a href="https://blog.csdn.net/m0_37814112/article/details/123737847">Linux运维实战：Nginx方向代理wss或ws</a></li><li><a href="https://blog.csdn.net/weixin_42714661/article/details/122978829">Host相关</a></li><li><a href="https://zhuanlan.zhihu.com/p/110168484">Let’s Encrypt实践指北</a></li><li><a href="https://www.cnblogs.com/teamblog/p/6219204.html">免费SSL证书 之Let’s Encrypt申请与部署(Windows Nginx)</a></li><li><a href="https://xsphehe.com/blogDetail?id=8">windows环境免费申请SSL证书</a></li><li><a href="https://blog.csdn.net/qq_33313155/article/details/124746273">windows使用Certbot配置nginx的https证书</a></li><li><a href="https://www.51cto.com/article/750673.html">如何使用 Nginx 和 Certbot 创建一个安全的 Web 服务器</a></li></ul>]]></content>
+        <content type="html"><![CDATA[<h2 id="调研背景"><a href="#调研背景" class="headerlink" title="调研背景"></a>调研背景</h2><blockquote><p>公司项目打算采用HTTPS来保证数据的安全性。在计划零成本的前提下，看是否可以实现HTTPS。</p></blockquote><h2 id="HTTP与HTTPS区别"><a href="#HTTP与HTTPS区别" class="headerlink" title="HTTP与HTTPS区别"></a>HTTP与HTTPS区别</h2><ul><li>数据加密：HTTPS 使用 SSL&#x2F;TLS 协议对传输数据进行加密，使得第三方无法窃取数据内容。HTTP 传输的数据是明文，容易被黑客窃取和篡改。</li><li>数据完整性：在数据传输过程中，HTTPS 使用消息认证码（MAC）校验数据完整性，如果数据被篡改或者损坏，在传输过程中会被损坏。</li><li>身份验证：HTTPS 使用证书机制来验证网络通信的双方身份，加强了验证的强度和客户端和服务器之间的信任。HTTP 没有身份验证机制，容易遭受中间人攻击。</li></ul><blockquote><p>HTTPS 并不是一种新的协议，我们可以理解为HTTPS协议 &#x3D; HTTP协议 + SSL&#x2F;TLS协议。通常来说，HTTP 是直接和 TCP 进行通信的。当我们使用  SSL&#x2F;TLS 时，会变成先和  SSL&#x2F;TLS 通信，然后再由  SSL&#x2F;TLS 和 TCP 进行通信。</p></blockquote><p><img src="https://img.fsllala.top/https.png" alt="https"></p><h2 id="SSL-x2F-TLS"><a href="#SSL-x2F-TLS" class="headerlink" title="SSL&#x2F;TLS"></a>SSL&#x2F;TLS</h2><blockquote><p>SSL（Secure Sockets Layer）和 TLS（Transport Layer Security）都是网络通信中的加密协议，它们的主要目的是在网络通信中保护传输数据的机密性和完整性。SSL是TLS的前身，TLS是SSL的升级版，这两者之间的区别如下：</p></blockquote><ul><li>名称： SSL是早期加密协议的名称，后来被TLS所取代。目前常用的是TLS协议。</li><li>历史：SSL协议是在1995年由Netscape开发的。随着时间的推移，SSL逐渐被其他安全协议所取代。TLS是SSL的继任者，旨在改进SSL协议中的一些安全问题。TLS协议于1999年发布，TLS 1.0成为Internet工程任务组（IETF）的正式标准。</li><li>版本：SSL协议共有三个版本，分别为SSL 1.0、SSL 2.0和SSL 3.0，但是SSL 2.0存在一些安全性问题，并且被证明不可靠，已经不再使用。TLS协议目前有四个版本，分别为TLS 1.0、TLS 1.1、TLS 1.2和TLS 1.3。</li><li>安全性：TLS协议比SSL协议更加安全，因为TLS协议改进了一些SSL协议中的安全问题。例如，TLS协议使用更强的加密算法，可以保护数据传输的安全性，并防止中间人攻击。TLS 1.3版本还可以提高握手过程的效率，并提供更好的安全保障。</li><li>应用：SSL和TLS协议都可以用于加密HTTP请求，从而保护用户数据的安全性。HTTPS（HTTP over SSL&#x2F;TLS）是使用SSL或TLS协议加密的HTTP请求。</li></ul><p>总之，SSL和TLS协议都是用于在网络上保护数据传输的安全性的加密协议。虽然SSL协议已经不再使用，但TLS协议已经取代了SSL协议，并成为了现代互联网上加密通信的标准。</p><p>注：可以F12，选择Security进行查看单管网站所用的版本；</p><p><img src="https://img.fsllala.top/tlsVersion.png" alt="tlsVersion"></p><h2 id="证书颁发机构（CA）"><a href="#证书颁发机构（CA）" class="headerlink" title="证书颁发机构（CA）"></a>证书颁发机构（CA）</h2><ul><li><p>证书颁发机构（Certificate Authority，CA）是一种受信任的第三方实体，它负责验证数字证书中的信息，并将其绑定到公钥上，从而帮助确保证书的真实性和完整性。</p></li><li><p>数字证书是一种用于加密通信和保护数据完整性的安全证书。数字证书包含一个公钥和与该公钥相关联的信息，例如证书的所有者和有效期。当客户端连接到一个使用SSL&#x2F;TLS协议保护的服务时，服务器会向客户端发送一个数字证书，以证明自己的身份和服务器的公钥。</p></li><li><p>在数字证书中，公钥由证书颁发机构签名，以验证证书中的信息的真实性和完整性。因此，证书颁发机构是数字证书中非常重要的一个组成部分，它为证书的真实性和完整性提供了保障。</p></li><li><p>通过使用受信任的证书颁发机构签名的数字证书，客户端可以确信服务器的身份，从而可以信任与服务器之间的通信。在Web浏览器中，浏览器会预装一组受信任的证书颁发机构，以验证访问的网站的证书是否有效。如果证书不是由受信任的证书颁发机构签发的，浏览器就会发出警告，提示用户访问的网站可能不安全。</p></li></ul><h2 id="mkcert"><a href="#mkcert" class="headerlink" title="mkcert"></a>mkcert</h2><blockquote><p><a href="https://github.com/FiloSottile/mkcert">mkcert</a>  是一个用于制作本地可信任开发证书的简单工具，不需要配置。</p><p>使用来自真实证书颁发机构 (CA) 的证书进行开发可能是危险的或不可能的（对于主机，如<code>example.test</code>,<code>localhost</code>或<code>127.0.0.1</code>），但<strong>自签名证书</strong>会导致信任错误。</p><p>mkcert 自动在系统根存储中创建并安装本地 CA，并生成本地信任的证书。</p></blockquote><h2 id="Let’s-Encrypt"><a href="#Let’s-Encrypt" class="headerlink" title="Let’s Encrypt"></a>Let’s Encrypt</h2><ul><li>Let’s Encrypt是国外一个公共的免费SSL项目，由 Linux 基金会托管，由Mozilla、思科、Akamai、IdenTrust和EFF等组织发起，<strong>靠谱！</strong></li><li>Let’s Encrypt安装部署简单、方便，目前Cpanel、Oneinstack等面板都已经集成了Let’s Encrypt一键申请安装，<strong>简单！</strong></li><li>Let’s Encrypt证书<strong>有效期三个月</strong>，每三个月需要续签证书 <a href="https://letsencrypt.org/2015/11/09/why-90-days.html">see why</a> </li><li>Let’s Encrypt注册主域名<strong>认证频率</strong>20个&#x2F;周，同一域名重复认证 5次&#x2F;周 <a href="https://letsencrypt.org/docs/rate-limits/">see more</a></li><li>Let’s Encrypt不支持绑定IP，只能绑定域名，域名需可以在公共 Internet 上被访问到</li></ul><h2 id="mkcert与Let’s-Encrypt区别"><a href="#mkcert与Let’s-Encrypt区别" class="headerlink" title="mkcert与Let’s Encrypt区别"></a>mkcert与Let’s Encrypt区别</h2><ul><li>认证机构：Let’s Encrypt是一个公共的免费认证机构，可以为任何人免费签发SSL证书。与之相反，mkcert是一个自签名证书工具，它创建的证书只能用于开发和测试目的。</li><li>证书的有效期：Let’s Encrypt签发的证书的有效期为90天。在证书即将过期时，您可以自动更新证书。相反，mkcert默认情况下签发的证书有效期为2年，需要手动更新证书。</li><li>使用场景：Let’s Encrypt适用于需要为公共访问的网站签发证书的情况，例如在线商店、社交媒体等。而mkcert适用于开发和测试环境中使用，例如本地开发机器、测试环境等。</li><li>验证方式：Let’s Encrypt使用ACME协议来验证证书请求者的身份。ACME是一种自动化的验证协议，需要您在域名系统中创建一个特殊的DNS记录或在您的Web服务器上放置一个特殊的文件。ACME协议将验证这些信息，以确定您对域名或服务器的控制权；相反，mkcert使用本地证书颁发机构（CA）来签署证书，因此只能用于本地开发环境和测试环境。当您安装mkcert时，它将在您的计算机上创建一个本地CA，并将其添加到操作系统的信任列表中。这使得mkcert能够签署您本地环境中的SSL证书，而无需进行任何验证。</li><li>配置和使用：使用Let’s Encrypt需要您安装ACME客户端，并将其配置为与您的Web服务器配合使用。您还需要将域名解析为您的Web服务器，并公开暴露您的服务器以接受来自Let’s Encrypt的验证请求。相反，使用mkcert只需要在您的计算机上安装它，并使用它来生成证书。由于mkcert是自签名的，您无需将域名解析为Web服务器或公开暴露Web服务器以进行验证。您可以使用mkcert在本地生成SSL证书，并将其用于开发和测试目的。</li><li>安全性：Let’s Encrypt签发的证书使用公共密钥加密技术，可以提供与任何其他公共CA颁发的证书相同的安全保障。它还提供了TLSA记录，可防止DNS中间人攻击。由于mkcert是自签名的，因此不能提供与公共CA颁发的证书相同的安全保障。它仅适用于开发和测试环境，并不适合用于公共网站。但是，在本地环境中使用mkcert仍然比在未加密的HTTP连接上运行应用程序要更安全。</li></ul><p>总结：如果您需要在公共网站上使用SSL证书，建议使用Let’s Encrypt，因为Let’s Encrypt是一个针对公共网站的免费证书颁发机构。而如果您只是在开发和测试环境中使用SSL证书，则建议使用mkcert，因为mkcert则是一个针对本地开发和测试环境的工具，用于快速创建自签名的SSL证书。</p><h2 id="关于IP绑定"><a href="#关于IP绑定" class="headerlink" title="关于IP绑定"></a>关于IP绑定</h2><h3 id="Let’s-Encrypt-1"><a href="#Let’s-Encrypt-1" class="headerlink" title="Let’s Encrypt"></a>Let’s Encrypt</h3><blockquote><p>Let’s Encrypt不支持绑定IP地址，它只能绑定域名。Let’s Encrypt是一个免费的公共SSL证书颁发机构，它的证书是基于域名颁发的。在颁发证书时，Let’s Encrypt需要验证域名的所有权和控制权，而不能验证IP地址的所有权和控制权。因此，如果您想使用Let’s Encrypt证书保护您的网站，您必须使用域名来访问您的网站，而不能使用IP地址。如果您的网站必须使用IP地址来访问，您可以考虑使用其他证书颁发机构颁发的证书，这些机构可能支持使用IP地址来验证证书的所有权和控制权。</p></blockquote><h3 id="mkcert-1"><a href="#mkcert-1" class="headerlink" title="mkcert"></a>mkcert</h3><blockquote><p>mkcert不支持直接绑定IP地址，因为SSL&#x2F;TLS证书的设计是基于域名而非IP地址的。然而，您可以通过使用一个本地的域名解析器，例如 <code>dnsmasq</code>，来将您的IP地址映射到一个本地的域名上。这样，您可以在本地使用这个域名来访问您的服务，然后使用mkcert来为这个域名生成SSL&#x2F;TLS证书。生成的证书将会包含这个本地的域名，而不是您的IP地址。请注意，这种方法只适用于本地开发和测试，因为这个本地的域名不能被公共的DNS服务器解析。如果您需要在公共网络上使用SSL&#x2F;TLS证书来保护您的服务，您必须使用一个真实的域名，并将它绑定到您的IP地址上。</p></blockquote><h2 id="开发环境"><a href="#开发环境" class="headerlink" title="开发环境"></a>开发环境</h2><blockquote><p>win11，node(v16.18.0)、<a href="http://nginx.org/en/download.html"> nginx&#x2F;Windows-1.24.0</a></p></blockquote><h2 id="内网HTTPS-free"><a href="#内网HTTPS-free" class="headerlink" title="内网HTTPS(free)"></a>内网HTTPS(free)</h2><blockquote><p>综上所述，内网HTTPS采用mkcert进行开发。</p></blockquote><ol><li>mkcert下载：<a href="https://github.com/FiloSottile/mkcert/releases/tag/v1.4.4">下载链接</a></li></ol><p><img src="https://img.fsllala.top/mkcert_step1.png" alt="mkcert_step1"></p><ol start="2"><li>生成CA（certificate authority，即证书颁发机构）：输入cmd，初次安装mkcert</li></ol><p>输入<code>mkcert-v1.4.4-windows-amd64 -install</code> 命令 ，安装mkcert。将CA证书加入本地可信CA，使用此命令，就能帮助我们将mkcert使用的根证书加入了本地可信CA中，以后由该CA签发的证书在本地都是可信的。卸载命令 <code>mkcert-v1.4.4-windows-amd64 -uninstall</code></p><p><img src="https://img.fsllala.top/mkcert_step2.png" alt="mkcert_step2"></p><ol start="3"><li>安装成功，提示创建一个新的本地CA，本地CA现在已安装在系统信任存储中。</li></ol><p><img src="https://img.fsllala.top/mkcert_step3.png" alt="mkcert_step3"></p><ol start="4"><li>测试mkcert是否安装成功</li></ol><p><img src="https://img.fsllala.top/mkcert_step4.png" alt="mkcert_step4"></p><ol start="5"><li>查看CA证书存放位置</li></ol><p>输入<code>mkcert-v1.4.4-windows-amd64.exe -CAROOT</code>命令</p><p><img src="https://img.fsllala.top/mkcert_step5.png" alt="mkcert_step5"></p><p><img src="https://img.fsllala.top/mkcert_step5_1.png" alt="mkcert_step5_1"></p><p>按“Windows键+R”调出运行框，输入certmgr.msc命令。打开证书控制台。</p><p><img src="https://img.fsllala.top/mkcert_step5_2.png" alt="mkcert_step5_2"></p><ol start="6"><li>生成自签证书,可供局域网内使用其他主机访问。</li></ol><ul><li><p>直接跟多个要签发的域名或 ip 就行了，比如签发一个仅本机访问的证书(可以通过127.0.0.1和localhost，以及 ipv6 地址::1访问)</p></li><li><p>需要在局域网内测试 https 应用，这种环境可能不对外，因此也无法使用像Let’s encrypt这种免费证书的方案给局域网签发一个可信的证书，而且Let’s encrypt本身也不支持认证 Ip。</p></li><li><p>证书可信的三个要素：</p><ul><li>由可信的 CA 机构签发；</li><li>访问的地址跟证书认证地址相符；</li><li>证书在有效期内；</li></ul></li><li><p>如果期望自签证书在局域网内使用，以上三个条件都需要满足。很明显自签证书一定可以满足证书在有效期内，那么需要保证前两条。我们签发的证书必须匹配浏览器的地址栏，比如局域网的 ip 或者域名，此外还需要信任 CA。操作如下：</p></li></ul><blockquote><p>创建自签名证书，例如要为域名：<code>fsllala.philisense.com</code>(随便输入的域名)和IP：<code>127.0.0.1 </code>、<code>192.168.11.242</code>(本机IP)创建证书，可以使用如下的命令</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mkcert-v1<span class="number">.4</span><span class="number">.4</span>-windows-amd64.<span class="property">exe</span> <span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span> <span class="number">192.168</span><span class="number">.11</span><span class="number">.242</span> fsllala.<span class="property">philisense</span>.<span class="property">com</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/mkcert_step6.png" alt="mkcert_step6"></p><p>在mkcert软件同目录下，生成了自签证书。如图所示。</p><blockquote><p>上述命令会自动使用第2步创建的CA生成证书文件，其中<code>xxx.pem</code>为证书，<code>xxx-key.pem</code>为私钥。生成了证书和私钥以后，就可以在web服务器开启https了。</p></blockquote><p><img src="https://img.fsllala.top/mkcert_step6_1.png" alt="mkcert_step6_1"></p><ol start="7"><li>通过nginx搭建web服务器并开启https</li></ol><figure class="highlight js"><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"><span class="comment">//nginx常用命令</span></span><br><span class="line">start nginx 开启</span><br><span class="line">nginx -s stop 停止</span><br><span class="line">nginx -s reload 重新加载</span><br></pre></td></tr></table></figure><p>修改nginx.conf文件中的证书和私钥的路径，别的暂时不做修改。<img src="https://img.fsllala.top/mkcert_step7.png" alt="mkcert_step7"></p><p>进入nginx文件夹，开启nginx</p><p><img src="https://img.fsllala.top/mkcert_step7_1.png" alt="mkcert_step7_1"></p><ol start="8"><li>访问搭建的服务</li></ol><p>通过步骤6配置的IP进行访问，这里经测试，目前127.0.0.1:443和fsllala.philisense.com:443目前不能访问。</p><p><img src="https://img.fsllala.top/mkcert_step8.png" alt="mkcert_step8"></p><p>将vue项目通过<code>npm run build</code>进行打包，然后将dist文件下中的打包文件放到nginx的html目录中</p><p><img src="https://img.fsllala.top/mkcert_step8_1.png" alt="mkcert_step8_1"></p><p>再次通过步骤6配置的IP进行访问</p><p>注：这里可能会遇到<code>Invalid Host header</code>的错误，<a href="https://www.cnblogs.com/z937741304/p/10536237.html">解决方法</a></p><p><img src="https://img.fsllala.top/mkcert_step8_2.png" alt="mkcert_step8_2"></p><blockquote><p>这里可以看到警告，意思大概为：请求并未升级到https，因为访问地址是ip地址，应该采用域名进行https访问。</p></blockquote><ol start="9"><li>本地开发指定 Host</li></ol><p>因为网上没有特定的概念词语，因此我这边总结的标题是本地开发指定 Host，但其实简单点就是：<code>localhost -&gt; devlopment.com</code>。</p><p>通过win+R，然后输入<code>C:\Windows\System32\drivers\etc</code>，可以找到hosts文件</p><p><img src="https://img.fsllala.top/mkcert_step9.png" alt="mkcert_step9"></p><p>然后将步骤6中的域名与本地ip进行映射</p><p><img src="https://img.fsllala.top/mkcert_step9_1.png" alt="mkcert_step9_1"></p><p>稍等片刻，然后进行域名访问(这里不能挂代理，不然会访问不了)，可以看到，没有上面IP的提示了。</p><p><img src="https://img.fsllala.top/mkcert_step9_2.png" alt="mkcert_step9_2"></p><ol start="10"><li>此时用局域网的<strong>另一台电脑</strong>进行访问，通过<code>https://192.168.11.242/#/</code>可以进行访问，通过<code>https://fsllala.philisense.com/#/</code>不能进行访问。</li></ol><p><img src="https://img.fsllala.top/unsafe.png"></p><p>可以看到另一台电脑上显示此证书是不安全的，因为我们用的证书是自签的，而不是公认的CA。我们需要将第2步产生的CA：</p><p><code>rootCA-key.pem</code> 和 <code>rootCA.pem</code>，将 <code>rootCA.pem</code> 复制到 另一台PC 上，并将其后缀改为 <code>.crt</code>。</p><p><img src="https://img.fsllala.top/rootCA.webp" alt="rootCA"></p><p>双击 <code>rootCA.crt</code>，根据提示安装证书，步骤如下：</p><p><img src="https://img.fsllala.top/rootCA_install.webp" alt="rootCA_install"></p><p>重启浏览器再次访问，可以看到连接已经变为安全。</p><ol start="11"><li>另一台机器使用域名进行访问</li></ol><p>同搭建环境的机器一样，在另一台机器上，也需要本地开发指定 Host，即：<code>192.168.11.242 fsllala.philisense.com</code>，然后稍等片刻，即可进行访问。(步骤10解决了HTTPS不信任的问题)</p><ol start="12"><li>接口全部不能通信</li></ol><p>因为HTTP和HTTPS是两个不同的协议，所以两者不能进行通信。项目虽然是HTTPS了，但是接口都噶了，肯定是不行的，所以需要通过nginx进行接口的代理，将原来的HTTP接口，反向代理成HTTPS接口。</p><p><img src="https://img.fsllala.top/mkcert_step12.png" alt="mkcert_step12"></p><ol start="13"><li>反向代理 接口HTTP为HTTPS，WS为WSS</li></ol><p>因为项目用到了HTTP和WS，所以都需要进行代理：以下代码意思为：接口中带有<code>/fsl/</code>的都会走<code>http://192.168.13.102:9003/</code>代理</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">server &#123;</span><br><span class="line">   listen       <span class="number">443</span> ssl;</span><br><span class="line">   server_name  localhost;</span><br><span class="line"></span><br><span class="line">#    ssl_certificate      cert.<span class="property">pem</span>;</span><br><span class="line">#    ssl_certificate_key  cert.<span class="property">key</span>;</span><br><span class="line">   #证书</span><br><span class="line">   ssl_certificate /mkcert2/<span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span>+<span class="number">2.</span>pem;</span><br><span class="line">   #私钥</span><br><span class="line">   ssl_certificate_key /mkcert2/<span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span>+<span class="number">2</span>-key.<span class="property">pem</span>;</span><br><span class="line"></span><br><span class="line">   ssl_session_cache    <span class="attr">shared</span>:<span class="attr">SSL</span>:1m;</span><br><span class="line">   ssl_session_timeout  5m;</span><br><span class="line"></span><br><span class="line">   ssl_ciphers  <span class="attr">HIGH</span>:!<span class="attr">aNULL</span>:!<span class="title class_">MD5</span>;</span><br><span class="line">   ssl_prefer_server_ciphers  on;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">location /fsl/ &#123;</span><br><span class="line"># root   html;</span><br><span class="line"># index  index.<span class="property">html</span> index.<span class="property">htm</span>;</span><br><span class="line">    proxy_pass <span class="attr">http</span>:<span class="comment">//192.168.13.102:9003/; #现接口地址</span></span><br><span class="line"></span><br><span class="line"># websocket</span><br><span class="line"># proxy_pass <span class="attr">http</span>:<span class="comment">//192.168.13.102:9003/;  #websocket服务器</span></span><br><span class="line">proxy_http_version <span class="number">1.1</span>;</span><br><span class="line">proxy_set_header <span class="title class_">Upgrade</span> $http_upgrade;</span><br><span class="line">proxy_set_header <span class="title class_">Connection</span> <span class="string">&quot;upgrade&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">   location / &#123;</span><br><span class="line">       root   html;</span><br><span class="line">       index  index.<span class="property">html</span> index.<span class="property">htm</span>;</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/mkcert_step13.png" alt="mkcert_step13"></p><p>然后将vue项目中的接口服务地址和协议进行修改，如下图所示：</p><blockquote><p>需要修改IP，https&#x2F;wss、端口号、进行nginx代理的关键字(&#x2F;fsl&#x2F;)</p></blockquote><p><img src="https://img.fsllala.top/mkcert_step13_1.png" alt="mkcert_step13_1"></p><p>然后将vue进行打包，放到nginx下的html目录下；nginx通过<code>nginx -s reload</code>进行重新加载。</p><ol start="14"><li>通过上述映射的域名(<a href="https://fsllala.philisense.com)进行访问/">https://fsllala.philisense.com)进行访问</a></li></ol><p>可能会出现一些图片&#x2F;标乱码的情况，关闭浏览器，重新打开即可。</p><p><img src="https://img.fsllala.top/mkcert_step14.png" alt="mkcert_step14"></p><p><img src="https://img.fsllala.top/mkcert_step14_1.png" alt="mkcert_step14_1"></p><p>可以看到，此时接口(http、ws)均进行了代理，可以进行正常的访问。</p><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul><li>虽然可以将 SSL&#x2F;TLS 证书与 IP 地址绑定，但出于安全和兼容性考虑，建议尽可能使用域名来保护您的应用程序；</li><li>使用mkcert可以进行内网的https，但是局域网内的另一台PC，会显示此https不安全，需要安装CA根证书解决不安全的问题；</li><li>局域网的另一台PC，同搭建环境PC一样，不能直接通过映射的域名进行访问，需要修改host进行域名映射。</li></ul><h2 id="外网HTTPS"><a href="#外网HTTPS" class="headerlink" title="外网HTTPS"></a>外网HTTPS</h2><blockquote><p>外网免费HTTPS是不能绑定IP的，无论是上面提及的Let’s Encrypt，还是腾讯云，阿里云等。</p></blockquote><h3 id="腾讯云"><a href="#腾讯云" class="headerlink" title="腾讯云"></a>腾讯云</h3><p><a href="https://cloud.tencent.com/document/product/400/89868">免费SSL</a></p><p><img src="https://img.fsllala.top/tencentSSL.png" alt="tencentSSL"></p><h3 id="阿里云"><a href="#阿里云" class="headerlink" title="阿里云"></a>阿里云</h3><p><a href="https://help.aliyun.com/document_detail/205510.html?spm=5176.21213303.J_6704733920.9.411353c9TKatgq&scm=20140722.S_help@@%E6%96%87%E6%A1%A3@@205510._.ID_help@@%E6%96%87%E6%A1%A3@@205510-RL_%E5%85%8D%E8%B4%B9ssl%E8%AF%81%E4%B9%A6-LOC_main-OR_ser-V_2-RK_rerank-P0_0">免费SSL</a></p><p><img src="https://img.fsllala.top/aliSSL.png" alt="aliSSL"></p><h2 id="相关文献"><a href="#相关文献" class="headerlink" title="相关文献"></a>相关文献</h2><ul><li><a href="https://blog.csdn.net/qq_34375473/article/details/122310838">为什么 HTTPS 比 HTTP 更安全？HTTPS 如何保证数据传输安全性</a></li><li><a href="https://blog.csdn.net/qq_36631580/article/details/126272277?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-126272277-blog-122310838.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-126272277-blog-122310838.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&utm_relevant_index=6">HTTPS为什么是安全的</a></li><li><a href="https://juejin.cn/post/7141308011921801223#heading-0">前端本地开发指定域名以及 HTTPS 配置方案</a></li><li><a href="https://zhuanlan.zhihu.com/p/379501905">mkcert 使用指南：如何快速创建自签名 SSL 证书</a></li><li><a href="https://xybdiy.blog.csdn.net/article/details/119676301?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-119676301-blog-128340862.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-119676301-blog-128340862.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&utm_relevant_index=5&ydreferer=aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MTE4MDcxL2FydGljbGUvZGV0YWlscy8xMjgzNDA4NjI/c3BtPTEwMDEuMjEwMS4zMDAxLjY2NTAuNCZ1dG1fbWVkaXVtPWRpc3RyaWJ1dGUucGNfcmVsZXZhbnQubm9uZS10YXNrLWJsb2ctMiU3RWRlZmF1bHQlN0VDVFJMSVNUJTdFUmF0ZS00LTEyODM0MDg2Mi1ibG9nLTEyMzE2MDM1Ny4yMzUlNUV2MzIlNUVwY19yZWxldmFudF9pbmNyZWF0ZV90MF9kb3dubG9hZF92Ml9iYXNlJmRlcHRoXzEtdXRtX3NvdXJjZT1kaXN0cmlidXRlLnBjX3JlbGV2YW50Lm5vbmUtdGFzay1ibG9nLTIlN0VkZWZhdWx0JTdFQ1RSTElTVCU3RVJhdGUtNC0xMjgzNDA4NjItYmxvZy0xMjMxNjAzNTcuMjM1JTVFdjMyJTVFcGNfcmVsZXZhbnRfaW5jcmVhdGVfdDBfZG93bmxvYWRfdjJfYmFzZSZ1dG1fcmVsZXZhbnRfaW5kZXg9Ng==">使用mkcert工具生成受信任的SSL证书，解决局域网本地https访问问题</a></li><li><a href="https://blog.zwying.com/archives/51.html">windows使用mkcert配置本地https环境</a></li><li><a href="https://www.bilibili.com/read/cv19764245">本地 https 环境解决方案</a></li><li><a href="https://juejin.cn/post/6844903834272153613">使用mkcert创建自签名证书</a></li><li><a href="https://www.cnblogs.com/z937741304/p/10536237.html">解决Invalid Host header问题</a></li><li><a href="https://youyongba.github.io/doc/html/mkcert/">mkcert + nginx 搭建https</a></li><li><a href="https://blog.csdn.net/weixin_38242293/article/details/112214657?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-112214657-blog-128340862.235%5Ev32%5Epc_relevant_increate_t0_download_v2_base&spm=1001.2101.3001.4242.2&utm_relevant_index=4">window使用mkcert，nginx的配置https证书</a></li><li><a href="https://blog.csdn.net/m0_37814112/article/details/123737847">Linux运维实战：Nginx方向代理wss或ws</a></li><li><a href="https://blog.csdn.net/weixin_42714661/article/details/122978829">Host相关</a></li><li><a href="https://zhuanlan.zhihu.com/p/110168484">Let’s Encrypt实践指北</a></li><li><a href="https://www.cnblogs.com/teamblog/p/6219204.html">免费SSL证书 之Let’s Encrypt申请与部署(Windows Nginx)</a></li><li><a href="https://xsphehe.com/blogDetail?id=8">windows环境免费申请SSL证书</a></li><li><a href="https://blog.csdn.net/qq_33313155/article/details/124746273">windows使用Certbot配置nginx的https证书</a></li><li><a href="https://www.51cto.com/article/750673.html">如何使用 Nginx 和 Certbot 创建一个安全的 Web 服务器</a></li></ul>]]></content>
       
       
       <categories>
@@ -137,7 +137,7 @@
       <link href="/articles/7067fd0d.html"/>
       <url>/articles/7067fd0d.html</url>
       
-        <content type="html"><![CDATA[<h2 id="TypeScript是什么"><a href="#TypeScript是什么" class="headerlink" title="TypeScript是什么"></a>TypeScript是什么</h2><ul><li>TS是JS的超集，所以JS基础的类型都包含在内</li></ul><h2 id="TypeScript开发环境搭建"><a href="#TypeScript开发环境搭建" class="headerlink" title="TypeScript开发环境搭建"></a>TypeScript开发环境搭建</h2><ol><li>全局安装typescript：</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install typescript -g</span><br></pre></td></tr></table></figure><ol start="2"><li>查看typescript当前版本号：</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">tsc -v</span><br></pre></td></tr></table></figure><ol start="3"><li>将TS编译成JS( TS 不能直接在浏览器执行，需要编译器将TS转为JS)</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">tsc xxx.<span class="property">ts</span></span><br></pre></td></tr></table></figure><h2 id="基础数据类型"><a href="#基础数据类型" class="headerlink" title="基础数据类型"></a>基础数据类型</h2><ul><li>基础类型：Number、String、Boolean、null、undefined以及 ES6 的 <a href="http://es6.ruanyifeng.com/#docs/symbol">Symbol</a> 和 ES10 的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a>。</li></ul><h3 id="字符串类型"><a href="#字符串类型" class="headerlink" title="字符串类型"></a>字符串类型</h3><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">str</span>: <span class="built_in">string</span> = <span class="string">&quot;这是字符串类型&quot;</span>;</span><br><span class="line"><span class="comment">//上方我们将str这个变量定义为了string类型，如果对他输入其他类型的内容就会报错，例如：</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str1</span>: <span class="built_in">string</span> = <span class="number">666</span>;</span><br><span class="line"><span class="comment">//这个就会报错了，会提示你不能将类型&quot;number&quot;分配给类型&quot;string&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">muban</span>: <span class="built_in">string</span> = <span class="string">`web<span class="subst">$&#123;str&#125;</span>`</span>;</span><br><span class="line"><span class="comment">//我们也可以使用ES6中的模板字符串</span></span><br></pre></td></tr></table></figure><h3 id="数字类型"><a href="#数字类型" class="headerlink" title="数字类型"></a>数字类型</h3><p>支持十六进制、十进制、八进制和<a href="https://so.csdn.net/so/search?q=%E4%BA%8C%E8%BF%9B%E5%88%B6&spm=1001.2101.3001.7020">二进制</a></p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">num</span>: <span class="built_in">number</span> = <span class="number">123</span>;<span class="comment">//普通数字</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">notANumber</span>: <span class="built_in">number</span> = <span class="title class_">NaN</span>;<span class="comment">//Nan</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">infinityNumber</span>: <span class="built_in">number</span> = <span class="title class_">Infinity</span>;<span class="comment">//无穷大</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">decimal</span>: <span class="built_in">number</span> = <span class="number">6</span>;<span class="comment">//十进制</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">hex</span>: <span class="built_in">number</span> = <span class="number">0xf00d</span>;<span class="comment">//十六进制</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">binary</span>: <span class="built_in">number</span> = <span class="number">0b1010</span>;<span class="comment">//二进制</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">octal</span>: <span class="built_in">number</span> = <span class="number">0o744</span>;<span class="comment">//八进制</span></span><br></pre></td></tr></table></figure><h3 id="布尔类型"><a href="#布尔类型" class="headerlink" title="布尔类型"></a>布尔类型</h3><figure class="highlight typescript"><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"><span class="keyword">let</span> <span class="attr">b</span>:<span class="built_in">boolean</span> = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">b2</span>:<span class="built_in">boolean</span> = <span class="title class_">Boolean</span>(<span class="number">1</span>); <span class="comment">//隐式转换</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`b:<span class="subst">$&#123;b&#125;</span>,b2:<span class="subst">$&#123;b2&#125;</span>`</span>); <span class="comment">//b:false,b2:true</span></span><br></pre></td></tr></table></figure><h3 id="空值类型"><a href="#空值类型" class="headerlink" title="空值类型"></a>空值类型</h3><blockquote><p>JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 <code>void</code> 表示没有任何返回值的函数</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fnVoid</span>(<span class="params"></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;test void&quot;</span>);</span><br><span class="line">    <span class="keyword">return</span>; <span class="comment">//可以这样后面啥也不跟</span></span><br><span class="line">    <span class="comment">// 函数也可以定义为空值，如果定义了void则不能返回内容,否则就会报错，例如：</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fnVoid2</span>(<span class="params"></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">123</span>;</span><br><span class="line">    <span class="comment">//这个就会报错了，会提示你不能将类型“number”分配给类型“void”</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p><code>void</code> 类型的用法，主要是用在我们<strong>不希望</strong>调用者关心函数返回值的情况下，比如通常的<strong>异步回调函数</strong></p></blockquote><p><strong>void也可以定义undefined 和 null类型</strong></p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">u</span>: <span class="built_in">void</span> = <span class="literal">undefined</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>: <span class="built_in">void</span> = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure><p><strong>TIPS:</strong></p><p>如果你配置了tsconfig.json 开启了严格模式: 则 null 不能 赋予 void 类型 </p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;compilerOptions&quot;</span>:&#123;</span><br><span class="line">        <span class="string">&quot;strict&quot;</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/void1674789861382.png" alt="void"></p><p><strong>解决方法：</strong></p><ol><li><code>tsc --init</code>创建tsconfig文件；</li><li><code>tsconfig.json</code>文件内搜索<code>strict</code>，值改为<code>false</code>；</li></ol><h3 id="Null和undefined类型"><a href="#Null和undefined类型" class="headerlink" title="Null和undefined类型"></a>Null和undefined类型</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">u</span>: <span class="literal">undefined</span> = <span class="literal">undefined</span>;<span class="comment">//定义undefined</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>: <span class="literal">null</span> = <span class="literal">null</span>;<span class="comment">//定义null</span></span><br></pre></td></tr></table></figure><h3 id="void-和-undefined-和-null-最大的区别"><a href="#void-和-undefined-和-null-最大的区别" class="headerlink" title="void 和 undefined 和 null 最大的区别"></a>void 和 undefined 和 null 最大的区别</h3><blockquote><p>void的内容也是不能去赋值给别人的</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">u</span>: <span class="built_in">void</span> = <span class="literal">undefined</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>: <span class="literal">null</span> = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>: <span class="built_in">string</span> = <span class="string">&quot;123&quot;</span>;</span><br><span class="line">str = u;</span><br><span class="line"><span class="comment">// 这个就会报错了，会提示你不能将类型“void”分配给类型“string”</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/void21674791309884.png" alt="void"></p><blockquote><p>下面这样undefined与null可以赋值</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">u</span>: <span class="literal">undefined</span> = <span class="literal">undefined</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>: <span class="literal">null</span> = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>: <span class="built_in">string</span> = <span class="string">&quot;123&quot;</span>;</span><br><span class="line">str = u;</span><br></pre></td></tr></table></figure><h2 id="NodeJs-环境执行TS"><a href="#NodeJs-环境执行TS" class="headerlink" title="NodeJs 环境执行TS"></a>NodeJs 环境执行TS</h2><blockquote><p>上面每次执行代码，都需要将TS编译成JS，然后再通过NodeJs来执行JS，有点繁琐。</p></blockquote><p>NodeJs直接运行TS需要安装两个依赖：</p><ul><li><code>npm install @types/node -D</code>（node环境支持的依赖必装）</li><li><code>npm install ts-node -g</code></li><li>输出版本号：<code>ts-node -v</code></li><li>NodeJs执行TS：<code>ts-node xxx.ts</code></li></ul><h2 id="Any-类型-和-unknown-顶级类型"><a href="#Any-类型-和-unknown-顶级类型" class="headerlink" title="Any 类型 和 unknown 顶级类型"></a>Any 类型 和 unknown 顶级类型</h2><blockquote><p>any与unknown没有强制限定哪种类型，可以定义任何类型的值，被称为顶级类型(top type)。</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//any 可以定义任何类型的值</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">anys</span>: <span class="built_in">any</span>;</span><br><span class="line">anys = <span class="literal">true</span>;             <span class="comment">// OK</span></span><br><span class="line">anys = <span class="number">18</span>;               <span class="comment">// OK</span></span><br><span class="line">anys = <span class="string">&quot;Hello World&quot;</span>;    <span class="comment">// OK</span></span><br><span class="line">anys = [];               <span class="comment">// OK</span></span><br><span class="line">anys = &#123;&#125;;               <span class="comment">// OK</span></span><br><span class="line">anys = <span class="literal">null</span>;             <span class="comment">// OK</span></span><br><span class="line">anys = <span class="literal">undefined</span>;        <span class="comment">// OK</span></span><br><span class="line">anys = <span class="title class_">Symbol</span>(<span class="string">&quot;type&quot;</span>);   <span class="comment">// OK</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//unknown 可以定义任何类型的值</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">value</span>: <span class="built_in">unknown</span>;</span><br><span class="line"></span><br><span class="line">value = <span class="literal">true</span>;             <span class="comment">// OK</span></span><br><span class="line">value = <span class="number">18</span>;               <span class="comment">// OK</span></span><br><span class="line">value = <span class="string">&quot;Hello World&quot;</span>;    <span class="comment">// OK</span></span><br><span class="line">value = [];               <span class="comment">// OK</span></span><br><span class="line">value = &#123;&#125;;               <span class="comment">// OK</span></span><br><span class="line">value = <span class="literal">null</span>;             <span class="comment">// OK</span></span><br><span class="line">value = <span class="literal">undefined</span>;        <span class="comment">// OK</span></span><br><span class="line">value = <span class="title class_">Symbol</span>(<span class="string">&quot;type&quot;</span>);   <span class="comment">// OK</span></span><br></pre></td></tr></table></figure><h3 id="any与unknow区别"><a href="#any与unknow区别" class="headerlink" title="any与unknow区别"></a>any与unknow区别</h3><blockquote><p>TypeScript 3.0中引入的 unknown 类型也被认为是 top type ，但它更安全。与 any 一样，所有类型都可以分配给unknown</p><p>unknow类型比any更加严格当你要使用any 的时候可以尝试使用unknow</p></blockquote><ol><li>unknown可赋值对象只有unknown 和 any</li></ol><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//unknown类型不能赋值给unknown 和 any之外的其他类型</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">names</span>: <span class="built_in">unknown</span> = <span class="string">&#x27;123&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">names2</span>: <span class="built_in">string</span> = names;  <span class="comment">// 不能将类型“unknown”分配给类型“string”。</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//这样就没问题 any类型是可以的</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">ages</span>: <span class="built_in">any</span> = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">ages2</span>: <span class="built_in">string</span> = ages;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//unknown可赋值对象只有unknown 和 any</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">aaa</span>: <span class="built_in">unknown</span> = <span class="string">&#x27;123&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">bbb</span>: <span class="built_in">unknown</span> = <span class="string">&#x27;456&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">ccc</span>: <span class="built_in">any</span> = <span class="string">&quot;789&quot;</span>;</span><br><span class="line"></span><br><span class="line">aaa = bbb;</span><br><span class="line">aaa = ccc;</span><br></pre></td></tr></table></figure><ol start="2"><li>unknow 不能调用属性和方法</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//如果是any类型在对象没有这个属性的时候还在获取是不会报错的</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj</span>: <span class="built_in">any</span> = &#123; <span class="attr">b</span>: <span class="number">1</span> &#125;;</span><br><span class="line">obj.<span class="property">a</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//如果是unknow 不能调用属性和方法</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj2</span>: <span class="built_in">unknown</span> = &#123; <span class="attr">b</span>: <span class="number">1</span>, <span class="attr">ccc</span>: (): <span class="function"><span class="params">number</span> =&gt;</span> <span class="number">213</span> &#125;;</span><br><span class="line">obj2.<span class="property">b</span>;  <span class="comment">//类型“unknown”上不存在属性“b”。</span></span><br><span class="line">obj2.<span class="title function_">ccc</span>(); <span class="comment">//类型“unknown”上不存在属性“ccc”。</span></span><br></pre></td></tr></table></figure><ol start="3"><li>声明变量的时候没有指定任意类型默认为any(如果使用any 就失去了TS类型检测的作用)</li></ol><h2 id="接口和对象类型"><a href="#接口和对象类型" class="headerlink" title="接口和对象类型"></a>接口和对象类型</h2><h3 id="interface定义对象类型"><a href="#interface定义对象类型" class="headerlink" title="interface定义对象类型"></a>interface定义对象类型</h3><blockquote><p>在JS中，我们声明对象，直接写就好了</p></blockquote><figure class="highlight typescript"><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"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>在TS中，我们定义对象的方式要用关键字<strong>interface</strong>（接口），我的理解是使用<strong>interface</strong>来定义一种约束(类型)，让数据的结构满足约束的格式。定义方式如下：</p></blockquote><ul><li>有点类似于<strong>类</strong>的写法</li></ul><ol><li>使用接口约束的时候不能多一个属性也不能少一个属性，必须与接口保持一致</li></ol><figure class="highlight typescript"><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">/**</span></span><br><span class="line"><span class="comment"> *这样写是会报错的 因为我们在Person定义了name、age 但是对象里面缺少age属性</span></span><br><span class="line"><span class="comment"> *使用接口约束的时候不能多一个属性也不能少一个属性</span></span><br><span class="line"><span class="comment"> *必须与接口保持一致</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Person</span>&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//  这个就会报错了，会提示 类型 &quot;&#123; name: string; &#125;&quot; 中缺少属性 &quot;age&quot;，但类型 &quot;Person&quot; 中需要该属性。</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>:<span class="title class_">Person</span>=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;fsllala&quot;</span>  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>重名interface  可以合并</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> A &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> A &#123;</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj</span>: A = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj); <span class="comment">//&#123; name: &#x27;fsllala&#x27;, age: 18 &#125;</span></span><br></pre></td></tr></table></figure><ol start="3"><li>可选属性 使用?操作符</li></ol><figure class="highlight typescript"><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">//可选属性的含义是该属性可以不存在</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    age?: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//所以说这样写也是没问题的</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>: <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//当然这样写也没问题</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person2</span>: <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsl&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li>索引签名[propName: string]</li></ol><blockquote><p>后端给我们返回的字段不确定，类型也不确定的时候可以用任意属性；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 在这个例子当中我们看到接口中并没有定义ccc和ddd但是并没有报错</span></span><br><span class="line"><span class="comment"> * 因为我们定义了[propName: string]: any;</span></span><br><span class="line"><span class="comment"> * 允许添加新的任意属性</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    [<span class="attr">propName</span>: <span class="built_in">string</span>]: <span class="built_in">any</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>: <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsl&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">ccc</span>: <span class="number">123</span>,</span><br><span class="line">    <span class="attr">ddd</span>:<span class="string">&#x27;456&#x27;</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li>只读属性 readonly</li></ol><blockquote><p>readonly 只读属性是不允许被赋值的只能读取；(跟input的readonly属性类似)；</p><p>常用于<code>函数</code>和后台返回的数据<code>ID</code></p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="keyword">readonly</span> <span class="attr">id</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    [<span class="attr">propName</span>: <span class="built_in">string</span>]: <span class="built_in">any</span>,</span><br><span class="line">    <span class="keyword">readonly</span> <span class="attr">cb</span>: <span class="function">() =&gt;</span> <span class="built_in">boolean</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>: <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">id</span>: <span class="number">2</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsl&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">ccc</span>: <span class="number">123</span>,</span><br><span class="line">    <span class="attr">cb</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//这样写是会报错的 会提示: 无法为“id”赋值，因为它是只读属性。</span></span><br><span class="line">person.<span class="property">id</span> = <span class="number">3</span>;  </span><br></pre></td></tr></table></figure><ol start="6"><li>添加函数</li></ol><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="keyword">readonly</span> <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    [<span class="attr">propName</span>: <span class="built_in">string</span>]: <span class="built_in">any</span>,</span><br><span class="line">    <span class="title function_">cb</span>(): <span class="built_in">number</span>, <span class="comment">//定义函数和函数返回值</span></span><br><span class="line">    <span class="attr">foo</span>: <span class="function">() =&gt;</span> <span class="built_in">boolean</span>  <span class="comment">//定义函数和函数返回值</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>: <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsl&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">ccc</span>: <span class="number">123</span>,</span><br><span class="line">    <span class="attr">dd</span>: <span class="number">111</span>,</span><br><span class="line">    <span class="attr">cb</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">456</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">foo</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="7"><li>继承</li></ol><blockquote><p>和ES6中类的继承类似；</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> A &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> B <span class="keyword">extends</span> A &#123;</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj</span>: B = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="interface定义函数类型"><a href="#interface定义函数类型" class="headerlink" title="interface定义函数类型"></a>interface定义函数类型</h3><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// interface定义函数格式: (参数列表):返回值</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Fn</span> &#123;</span><br><span class="line">    <span class="comment">// 函数是个方法,所以是 ();返回一个 number类型的数组;参数是name,为string类型</span></span><br><span class="line">    (<span class="attr">name</span>: <span class="built_in">string</span>): <span class="built_in">number</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">foo</span>: <span class="title class_">Fn</span> = <span class="keyword">function</span> (<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="数组类型"><a href="#数组类型" class="headerlink" title="数组类型"></a>数组类型</h2><blockquote><p>数组类型有多种声明方法：</p></blockquote><ol><li>普通方式：类型[ ]</li></ol><figure class="highlight typescript"><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"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="built_in">number</span>[] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];  <span class="comment">//数组类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr2</span>: <span class="built_in">string</span>[] = [<span class="string">&quot;1&quot;</span>, <span class="string">&quot;2&quot;</span>, <span class="string">&quot;3&quot;</span>];  <span class="comment">//字符串类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr3</span>: <span class="built_in">boolean</span>[] = [<span class="literal">true</span>, <span class="literal">false</span>];<span class="comment">//布尔类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr4</span>: <span class="built_in">any</span>[] = [<span class="number">1</span>, <span class="string">&quot;2&quot;</span>, <span class="literal">true</span>,[],&#123;&#125;]; <span class="comment">//任意类型的数组</span></span><br></pre></td></tr></table></figure><ol start="2"><li>数组泛型 ：Array&lt;类型&gt;</li></ol><figure class="highlight typescript"><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"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="title class_">Array</span>&lt;<span class="built_in">number</span>&gt; = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];  <span class="comment">//数组类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr2</span>: <span class="title class_">Array</span>&lt;<span class="built_in">string</span>&gt; = [<span class="string">&quot;1&quot;</span>, <span class="string">&quot;2&quot;</span>, <span class="string">&quot;3&quot;</span>];  <span class="comment">//字符串类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr3</span>: <span class="title class_">Array</span>&lt;<span class="built_in">boolean</span>&gt; = [<span class="literal">true</span>, <span class="literal">false</span>];<span class="comment">//布尔类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr4</span>: <span class="title class_">Array</span>&lt;<span class="built_in">any</span>&gt; = [<span class="number">1</span>, <span class="string">&quot;2&quot;</span>, <span class="literal">true</span>, [], &#123;&#125;]; <span class="comment">//任意类型的数组</span></span><br></pre></td></tr></table></figure><ol start="3"><li>用接口表示数组：一般用来描述类数组</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">NumArray</span> &#123;</span><br><span class="line">    [<span class="attr">index</span>: <span class="built_in">number</span>]: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="title class_">NumArray</span> = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="comment">//表示：只要索引的类型是数字时，那么值的类型必须是数字。</span></span><br></pre></td></tr></table></figure><h3 id="对象数组"><a href="#对象数组" class="headerlink" title="对象数组"></a>对象数组</h3><blockquote><p>使用<code>interface</code>方式来定义对象数组</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> X &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    age?: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 表示对象类型的数组</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">arr1</span>: X[] = [&#123; <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>, <span class="attr">age</span>: <span class="number">18</span> &#125;, &#123; <span class="attr">name</span>: <span class="string">&quot;fsl&quot;</span> &#125;];</span><br></pre></td></tr></table></figure><h3 id="多维数组"><a href="#多维数组" class="headerlink" title="多维数组"></a>多维数组</h3><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//普通写法</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="built_in">number</span>[][] = [[<span class="number">1</span>, <span class="number">2</span>], [<span class="number">3</span>, <span class="number">4</span>]]; <span class="comment">//二维数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr2</span>: <span class="built_in">number</span>[][][] = [[[<span class="number">1</span>]], [[<span class="number">2</span>]]];<span class="comment">//三维数组</span></span><br><span class="line"><span class="comment">//泛型写法</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr3</span>: <span class="title class_">Array</span>&lt;<span class="title class_">Array</span>&lt;<span class="built_in">number</span>&gt;&gt; = [[<span class="number">1</span>, <span class="number">2</span>], [<span class="number">3</span>, <span class="number">4</span>]]; <span class="comment">//二维数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr4</span>: <span class="title class_">Array</span>&lt;<span class="title class_">Array</span>&lt;<span class="title class_">Array</span>&lt;<span class="built_in">number</span>|<span class="built_in">string</span>&gt;&gt;&gt; = [[[<span class="number">1</span>]], [[<span class="number">2</span>,<span class="string">&quot;lala&quot;</span>]]];<span class="comment">//三维数组</span></span><br></pre></td></tr></table></figure><h3 id="arguments类数组"><a href="#arguments类数组" class="headerlink" title="arguments类数组"></a>arguments类数组</h3><blockquote><p>函数内置的arguments，是个类数组，其实就是有length属性的对象；所以没有数组的方法：push、pop…</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Arr</span>(<span class="params">...args: <span class="built_in">any</span></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>); <span class="comment">// [Arguments] &#123; &#x27;0&#x27;: 2, &#x27;1&#x27;: 3, &#x27;2&#x27;: 4 &#125;  伪(类)数组(没有数组的方法:push、pop...)</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(args); <span class="comment">// [ 2, 3, 4 ]  数组</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Arr</span>(<span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>);</span><br></pre></td></tr></table></figure><blockquote><p>所以就会导致如下情况：</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Arr</span>(<span class="params">...args: <span class="built_in">any</span></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="comment">//错误的arguments 是类数组不能这样定义</span></span><br><span class="line">    <span class="keyword">let</span> <span class="attr">arr</span>: <span class="built_in">number</span>[] = <span class="variable language_">arguments</span>; <span class="comment">// 这样写是会报错的 会提示: 类型“IArguments”缺少类型“number[]”的以下属性: pop, push, concat, join 及其他 27 项。</span></span><br><span class="line">    <span class="keyword">let</span> <span class="attr">arr2</span>: <span class="built_in">number</span>[] = args; <span class="comment">// 这个是可以的</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//ts内置对象IArguments 定义</span></span><br><span class="line">    <span class="keyword">let</span> <span class="attr">arr3</span>:<span class="title class_">IArguments</span>=<span class="variable language_">arguments</span>; <span class="comment">//类数组用IArguments</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Arr</span>(<span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>);</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"><span class="comment">//其中 IArguments 是 TypeScript 中定义好了的类型，它实际上就是：</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">IArguments</span> &#123;</span><br><span class="line">[<span class="attr">index</span>: <span class="built_in">number</span>]: <span class="built_in">any</span>;</span><br><span class="line"><span class="attr">length</span>: <span class="built_in">number</span>;</span><br><span class="line"><span class="attr">callee</span>: <span class="title class_">Function</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="函数拓展"><a href="#函数拓展" class="headerlink" title="函数拓展"></a>函数拓展</h2><ol><li>匿名函数可以进行类型推导,不推荐在写类型,因为可能会写错;</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr1 = [<span class="string">&quot;lala&quot;</span>, <span class="string">&quot;wawa&quot;</span>, <span class="string">&quot;miaomiao&quot;</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 匿名函数不建议手写写类型</span></span><br><span class="line">arr1.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(item, index);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ol start="2"><li>interface定义函数类型；</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 格式: (参数列表):返回值</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Ikun</span> &#123;</span><br><span class="line">    (<span class="attr">name</span>: <span class="built_in">string</span>): <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun</span>: <span class="title class_">Ikun</span> = (<span class="attr">aa</span>: <span class="built_in">string</span>): <span class="function"><span class="params">string</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> aa;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">kunkun</span>(<span class="string">&quot;篮球&quot;</span>);</span><br></pre></td></tr></table></figure><ol start="3"><li>函数的调用签名(从对象的角度看待这个函数,也可以有其他属性)；</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">IBar</span> &#123;</span><br><span class="line">    <span class="attr">names</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    (<span class="attr">num</span>: <span class="built_in">number</span>): <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">bar2</span>: <span class="title class_">IBar</span> = (<span class="attr">arg</span>: <span class="built_in">number</span>): <span class="function"><span class="params">number</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> arg;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">bar2.<span class="property">names</span> = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">bar2.<span class="property">age</span> = <span class="number">18</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">bar2</span>(<span class="number">222</span>))</span><br></pre></td></tr></table></figure><ol start="4"><li>type定义函数类型；</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数类型表达式 格式: (参数列表)=&gt;返回值</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Bar</span> = <span class="function">(<span class="params">num1: <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">bar</span>: <span class="title class_">Bar</span> = (<span class="attr">arg</span>: <span class="built_in">number</span>): <span class="function"><span class="params">number</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> arg;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">bar</span>(<span class="number">111</span>));  <span class="comment">// 111</span></span><br></pre></td></tr></table></figure><ol start="5"><li>参数不能多传，也不能少传 必须按照约定的类型来</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fn = <span class="keyword">function</span> (<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> name + age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//表示：实参name是string,age是number类型，函数的返回值是 string类型;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = <span class="title function_">fn</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">// fsllala18</span></span><br></pre></td></tr></table></figure><ol start="6"><li>少传参数：定义默认的参数</li></ol><ul><li>ES6默认实参</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fn = <span class="keyword">function</span> (<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span> = <span class="number">24</span></span>): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> name + age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//表示：实参name是string,age是number类型，函数的返回值是 string类型;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = <span class="title function_">fn</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">//fsllala24</span></span><br></pre></td></tr></table></figure><ul><li>可选属性 使用?操作符(不传默认为undefined)</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fn = <span class="keyword">function</span> (<span class="params">name: <span class="built_in">string</span>, age?: <span class="built_in">number</span></span>): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> name + age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//表示：实参name是string,age是number类型，函数的返回值是 string类型;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = <span class="title function_">fn</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">//fsllalaundefined</span></span><br></pre></td></tr></table></figure><ul><li>接口定义函数</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">User</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fn = <span class="keyword">function</span> (<span class="params">user: User</span>): <span class="title class_">User</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> user;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//表示：实参是定义的 接口User类型，函数的返回值是 传入的参数;</span></span><br><span class="line"><span class="keyword">let</span> result = <span class="title function_">fn</span>(&#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">// &#123; name: &#x27;fsllala&#x27;, age: 18 &#125;</span></span><br></pre></td></tr></table></figure><ul><li>函数重载</li></ul><blockquote><p>函数重载：方法名字相同，而参数不同，与返回值无关。</p><p>如果参数类型不同，则参数类型应设置为 <strong>any</strong>。</p><p>参数数量不同你可以将不同的参数设置为可选。</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">params: <span class="built_in">number</span></span>): <span class="built_in">void</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">params: <span class="built_in">string</span>, params2: <span class="built_in">number</span></span>): <span class="built_in">void</span></span><br><span class="line"> <span class="comment">// 上面定义的两个是重载函数,下面是执行函数 (遵循上面两个重载函数,执行函数是写逻辑的)</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">params: <span class="built_in">any</span>, params2?: <span class="built_in">any</span></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(params)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(params2)</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="title function_">fn</span>(<span class="number">123</span>)</span><br><span class="line"><span class="title function_">fn</span>(<span class="string">&#x27;123&#x27;</span>,<span class="number">456</span>)</span><br></pre></td></tr></table></figure><blockquote><p>Tip：JS好像是不能这样写的，JS重载是通过函数内部的arguments的长度来实现的；</p></blockquote><h2 id="类型断言-联合类型-交叉类型"><a href="#类型断言-联合类型-交叉类型" class="headerlink" title="类型断言 | 联合类型 | 交叉类型"></a>类型断言 | 联合类型 | 交叉类型</h2><h3 id="联合类型"><a href="#联合类型" class="headerlink" title="联合类型"></a>联合类型</h3><blockquote><p>可以是多种类型，中间用<code>|</code>隔开</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//例如我们的手机号通常是17XXXXXXX 为数字类型 这时候产品说需要支持座机</span></span><br><span class="line"><span class="comment">//所以我们就可以使用联合类型支持座机字符串</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">myPhone</span>: <span class="built_in">number</span> | <span class="built_in">string</span>  = <span class="string">&#x27;010-820&#x27;</span></span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="comment">//这样写是会报错的应为我们的联合类型只有数字和字符串并没有布尔值</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">myPhone2</span>: <span class="built_in">number</span> | <span class="built_in">string</span>  = <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>函数使用联合类型</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fn1 = (<span class="attr">types</span>:<span class="built_in">number</span> | <span class="built_in">boolean</span>):<span class="function"><span class="params">boolean</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> !!types</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> result =<span class="title function_">fn1</span>(<span class="number">1</span>);</span><br><span class="line"><span class="keyword">const</span> result2 = <span class="title function_">fn1</span>(<span class="literal">false</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">// true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result2); <span class="comment">// false</span></span><br></pre></td></tr></table></figure><h3 id="交叉类型"><a href="#交叉类型" class="headerlink" title="交叉类型"></a>交叉类型</h3><blockquote><p>类似于<code>extends</code></p><p>多种类型的集合，联合对象将具有所联合类型的所有成员，中间用<code>&amp;</code>隔开；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">People</span> &#123;</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">height</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Man</span> &#123;</span><br><span class="line">    <span class="attr">sex</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">fsllala</span> = (<span class="params">man: People &amp; Man</span>) =&gt; &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(man.<span class="property">age</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(man.<span class="property">height</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(man.<span class="property">sex</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fsllala</span>(&#123;</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">height</span>: <span class="number">173</span>,</span><br><span class="line">    <span class="attr">sex</span>: <span class="string">&#x27;male&#x27;</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h3 id="类型断言"><a href="#类型断言" class="headerlink" title="类型断言"></a>类型断言</h3><blockquote><p>在使用<code>联合类型</code>的时候，可能会遇到某个属性A类型没有，B类型有，比如<code>length</code>属性<code>number没有</code>，<code>string有</code>；</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fn1 = <span class="keyword">function</span>(<span class="params">params:<span class="built_in">number</span>|<span class="built_in">string</span></span>):<span class="built_in">void</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(params.<span class="property">length</span>);  <span class="comment">//  类型“number”上不存在属性“length”</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">fn1</span>(<span class="string">&quot;123456&quot;</span>);</span><br></pre></td></tr></table></figure><blockquote><p>这个时候就得用到<code>类型断言</code>：需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误：</p></blockquote><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">值 <span class="keyword">as</span> 类型　　或　　&lt;类型&gt;值  value <span class="keyword">as</span> <span class="built_in">string</span>  &lt;<span class="built_in">string</span>&gt;value</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fn1 = <span class="keyword">function</span> (<span class="params">params: <span class="built_in">number</span> | <span class="built_in">string</span></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>((params <span class="keyword">as</span> <span class="built_in">string</span>).<span class="property">length</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">fn1</span>(<span class="string">&quot;123456&quot;</span>); <span class="comment">//6</span></span><br><span class="line"><span class="title function_">fn1</span>(<span class="number">123456</span>); <span class="comment">//undefined</span></span><br></pre></td></tr></table></figure><h3 id="使用any临时断言"><a href="#使用any临时断言" class="headerlink" title="使用any临时断言"></a>使用any临时断言</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">abc</span> = <span class="number">123</span></span><br><span class="line"><span class="comment">//这样写会报错因为window没有abc这个东西</span></span><br></pre></td></tr></table></figure><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">(<span class="variable language_">window</span> <span class="keyword">as</span> <span class="built_in">any</span>).<span class="property">abc</span> = <span class="number">123</span></span><br><span class="line"><span class="comment">//可以使用any临时断言在 any 类型的变量上，访问任何属性都是允许的。</span></span><br></pre></td></tr></table></figure><h2 id="内置对象"><a href="#内置对象" class="headerlink" title="内置对象"></a>内置对象</h2><blockquote><p>JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。</p></blockquote><h3 id="ECMAScript-的内置对象"><a href="#ECMAScript-的内置对象" class="headerlink" title="ECMAScript 的内置对象"></a>ECMAScript 的内置对象</h3><p>Boolean、Number、string、RegExp、Date、Error</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">b</span>: <span class="title class_">Boolean</span> = <span class="keyword">new</span> <span class="title class_">Boolean</span>(<span class="number">1</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>: <span class="title class_">Number</span> = <span class="keyword">new</span> <span class="title class_">Number</span>(<span class="literal">true</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">s</span>: <span class="title class_">String</span> = <span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&#x27;lala~&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(s)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">d</span>: <span class="title class_">Date</span> = <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(d)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">r</span>: <span class="title class_">RegExp</span> = <span class="regexp">/^1/</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(r)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">e</span>: <span class="title class_">Error</span> = <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&quot;error!&quot;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(e)</span><br></pre></td></tr></table></figure><h3 id="DOM-和-BOM-的内置对象"><a href="#DOM-和-BOM-的内置对象" class="headerlink" title="DOM 和 BOM 的内置对象"></a>DOM 和 BOM 的内置对象</h3><p><strong><code>Document</code>、<code>HTMLElement</code>、<code>Event</code>、<code>NodeList</code> 等</strong></p><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">body</span>: <span class="title class_">HTMLElement</span> = <span class="variable language_">document</span>.<span class="property">body</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">allDiv</span>: <span class="title class_">NodeList</span> = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line"><span class="comment">//读取div 这种需要类型断言 或者加个判断应为读不到返回null</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">div</span>:<span class="title class_">HTMLElement</span> = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>) <span class="keyword">as</span> <span class="title class_">HTMLDivElement</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params">e: MouseEvent</span>) &#123;</span><br><span class="line">    </span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//dom元素的映射表</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">HTMLElementTagNameMap</span> &#123;</span><br><span class="line">    <span class="string">&quot;a&quot;</span>: <span class="title class_">HTMLAnchorElement</span>;</span><br><span class="line">    <span class="string">&quot;abbr&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;address&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;applet&quot;</span>: <span class="title class_">HTMLAppletElement</span>;</span><br><span class="line">    <span class="string">&quot;area&quot;</span>: <span class="title class_">HTMLAreaElement</span>;</span><br><span class="line">    <span class="string">&quot;article&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;aside&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;audio&quot;</span>: <span class="title class_">HTMLAudioElement</span>;</span><br><span class="line">    <span class="string">&quot;b&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;base&quot;</span>: <span class="title class_">HTMLBaseElement</span>;</span><br><span class="line">    <span class="string">&quot;bdi&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;bdo&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;blockquote&quot;</span>: <span class="title class_">HTMLQuoteElement</span>;</span><br><span class="line">    <span class="string">&quot;body&quot;</span>: <span class="title class_">HTMLBodyElement</span>;</span><br><span class="line">    <span class="string">&quot;br&quot;</span>: <span class="title class_">HTMLBRElement</span>;</span><br><span class="line">    <span class="string">&quot;button&quot;</span>: <span class="title class_">HTMLButtonElement</span>;</span><br><span class="line">    <span class="string">&quot;canvas&quot;</span>: <span class="title class_">HTMLCanvasElement</span>;</span><br><span class="line">    <span class="string">&quot;caption&quot;</span>: <span class="title class_">HTMLTableCaptionElement</span>;</span><br><span class="line">    <span class="string">&quot;cite&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;code&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;col&quot;</span>: <span class="title class_">HTMLTableColElement</span>;</span><br><span class="line">    <span class="string">&quot;colgroup&quot;</span>: <span class="title class_">HTMLTableColElement</span>;</span><br><span class="line">    <span class="string">&quot;data&quot;</span>: <span class="title class_">HTMLDataElement</span>;</span><br><span class="line">    <span class="string">&quot;datalist&quot;</span>: <span class="title class_">HTMLDataListElement</span>;</span><br><span class="line">    <span class="string">&quot;dd&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;del&quot;</span>: <span class="title class_">HTMLModElement</span>;</span><br><span class="line">    <span class="string">&quot;details&quot;</span>: <span class="title class_">HTMLDetailsElement</span>;</span><br><span class="line">    <span class="string">&quot;dfn&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;dialog&quot;</span>: <span class="title class_">HTMLDialogElement</span>;</span><br><span class="line">    <span class="string">&quot;dir&quot;</span>: <span class="title class_">HTMLDirectoryElement</span>;</span><br><span class="line">    <span class="string">&quot;div&quot;</span>: <span class="title class_">HTMLDivElement</span>;</span><br><span class="line">    <span class="string">&quot;dl&quot;</span>: <span class="title class_">HTMLDListElement</span>;</span><br><span class="line">    <span class="string">&quot;dt&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;em&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;embed&quot;</span>: <span class="title class_">HTMLEmbedElement</span>;</span><br><span class="line">    <span class="string">&quot;fieldset&quot;</span>: <span class="title class_">HTMLFieldSetElement</span>;</span><br><span class="line">    <span class="string">&quot;figcaption&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;figure&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;font&quot;</span>: <span class="title class_">HTMLFontElement</span>;</span><br><span class="line">    <span class="string">&quot;footer&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;form&quot;</span>: <span class="title class_">HTMLFormElement</span>;</span><br><span class="line">    <span class="string">&quot;frame&quot;</span>: <span class="title class_">HTMLFrameElement</span>;</span><br><span class="line">    <span class="string">&quot;frameset&quot;</span>: <span class="title class_">HTMLFrameSetElement</span>;</span><br><span class="line">    <span class="string">&quot;h1&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h2&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h3&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h4&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h5&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h6&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;head&quot;</span>: <span class="title class_">HTMLHeadElement</span>;</span><br><span class="line">    <span class="string">&quot;header&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;hgroup&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;hr&quot;</span>: <span class="title class_">HTMLHRElement</span>;</span><br><span class="line">    <span class="string">&quot;html&quot;</span>: <span class="title class_">HTMLHtmlElement</span>;</span><br><span class="line">    <span class="string">&quot;i&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;iframe&quot;</span>: <span class="title class_">HTMLIFrameElement</span>;</span><br><span class="line">    <span class="string">&quot;img&quot;</span>: <span class="title class_">HTMLImageElement</span>;</span><br><span class="line">    <span class="string">&quot;input&quot;</span>: <span class="title class_">HTMLInputElement</span>;</span><br><span class="line">    <span class="string">&quot;ins&quot;</span>: <span class="title class_">HTMLModElement</span>;</span><br><span class="line">    <span class="string">&quot;kbd&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;label&quot;</span>: <span class="title class_">HTMLLabelElement</span>;</span><br><span class="line">    <span class="string">&quot;legend&quot;</span>: <span class="title class_">HTMLLegendElement</span>;</span><br><span class="line">    <span class="string">&quot;li&quot;</span>: <span class="title class_">HTMLLIElement</span>;</span><br><span class="line">    <span class="string">&quot;link&quot;</span>: <span class="title class_">HTMLLinkElement</span>;</span><br><span class="line">    <span class="string">&quot;main&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;map&quot;</span>: <span class="title class_">HTMLMapElement</span>;</span><br><span class="line">    <span class="string">&quot;mark&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;marquee&quot;</span>: <span class="title class_">HTMLMarqueeElement</span>;</span><br><span class="line">    <span class="string">&quot;menu&quot;</span>: <span class="title class_">HTMLMenuElement</span>;</span><br><span class="line">    <span class="string">&quot;meta&quot;</span>: <span class="title class_">HTMLMetaElement</span>;</span><br><span class="line">    <span class="string">&quot;meter&quot;</span>: <span class="title class_">HTMLMeterElement</span>;</span><br><span class="line">    <span class="string">&quot;nav&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;noscript&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;object&quot;</span>: <span class="title class_">HTMLObjectElement</span>;</span><br><span class="line">    <span class="string">&quot;ol&quot;</span>: <span class="title class_">HTMLOListElement</span>;</span><br><span class="line">    <span class="string">&quot;optgroup&quot;</span>: <span class="title class_">HTMLOptGroupElement</span>;</span><br><span class="line">    <span class="string">&quot;option&quot;</span>: <span class="title class_">HTMLOptionElement</span>;</span><br><span class="line">    <span class="string">&quot;output&quot;</span>: <span class="title class_">HTMLOutputElement</span>;</span><br><span class="line">    <span class="string">&quot;p&quot;</span>: <span class="title class_">HTMLParagraphElement</span>;</span><br><span class="line">    <span class="string">&quot;param&quot;</span>: <span class="title class_">HTMLParamElement</span>;</span><br><span class="line">    <span class="string">&quot;picture&quot;</span>: <span class="title class_">HTMLPictureElement</span>;</span><br><span class="line">    <span class="string">&quot;pre&quot;</span>: <span class="title class_">HTMLPreElement</span>;</span><br><span class="line">    <span class="string">&quot;progress&quot;</span>: <span class="title class_">HTMLProgressElement</span>;</span><br><span class="line">    <span class="string">&quot;q&quot;</span>: <span class="title class_">HTMLQuoteElement</span>;</span><br><span class="line">    <span class="string">&quot;rp&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;rt&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;ruby&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;s&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;samp&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;script&quot;</span>: <span class="title class_">HTMLScriptElement</span>;</span><br><span class="line">    <span class="string">&quot;section&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;select&quot;</span>: <span class="title class_">HTMLSelectElement</span>;</span><br><span class="line">    <span class="string">&quot;slot&quot;</span>: <span class="title class_">HTMLSlotElement</span>;</span><br><span class="line">    <span class="string">&quot;small&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;source&quot;</span>: <span class="title class_">HTMLSourceElement</span>;</span><br><span class="line">    <span class="string">&quot;span&quot;</span>: <span class="title class_">HTMLSpanElement</span>;</span><br><span class="line">    <span class="string">&quot;strong&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;style&quot;</span>: <span class="title class_">HTMLStyleElement</span>;</span><br><span class="line">    <span class="string">&quot;sub&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;summary&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;sup&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;table&quot;</span>: <span class="title class_">HTMLTableElement</span>;</span><br><span class="line">    <span class="string">&quot;tbody&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;td&quot;</span>: <span class="title class_">HTMLTableDataCellElement</span>;</span><br><span class="line">    <span class="string">&quot;template&quot;</span>: <span class="title class_">HTMLTemplateElement</span>;</span><br><span class="line">    <span class="string">&quot;textarea&quot;</span>: <span class="title class_">HTMLTextAreaElement</span>;</span><br><span class="line">    <span class="string">&quot;tfoot&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;th&quot;</span>: <span class="title class_">HTMLTableHeaderCellElement</span>;</span><br><span class="line">    <span class="string">&quot;thead&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;time&quot;</span>: <span class="title class_">HTMLTimeElement</span>;</span><br><span class="line">    <span class="string">&quot;title&quot;</span>: <span class="title class_">HTMLTitleElement</span>;</span><br><span class="line">    <span class="string">&quot;tr&quot;</span>: <span class="title class_">HTMLTableRowElement</span>;</span><br><span class="line">    <span class="string">&quot;track&quot;</span>: <span class="title class_">HTMLTrackElement</span>;</span><br><span class="line">    <span class="string">&quot;u&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;ul&quot;</span>: <span class="title class_">HTMLUListElement</span>;</span><br><span class="line">    <span class="string">&quot;var&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;video&quot;</span>: <span class="title class_">HTMLVideoElement</span>;</span><br><span class="line">    <span class="string">&quot;wbr&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="定义Promise"><a href="#定义Promise" class="headerlink" title="定义Promise"></a>定义Promise</h3><p>如果我们不指定返回的类型TS是推断不出来返回的是什么类型</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/promise1675065334340.png" alt="promise"></p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">promise</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(<span class="number">1</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>指定返回的类型</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/promise21675065518550.png" alt="promise"></p> <figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">promise</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>&lt;<span class="built_in">number</span>&gt;(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(<span class="number">1</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p> 函数定义返回promise 语法规则：<code>Promise&lt;T&gt;</code></p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">promise</span>(<span class="params"></span>): <span class="title class_">Promise</span>&lt;<span class="built_in">number</span>&gt; &#123;  <span class="comment">//  这里定义了 Promise&lt;number&gt; </span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>&lt;<span class="built_in">number</span>&gt;(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(<span class="number">1</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">promise</span>().<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(res);  <span class="comment">// 1</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="Class类"><a href="#Class类" class="headerlink" title="Class类"></a>Class类</h2><blockquote><p>ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。详见：<a href="https://fsllala.eu.org/articles/28239a8d.html">面向对象</a></p></blockquote><h3 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h3><p>在TypeScript是不允许直接在constructor 定义变量的</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/class1675069121527.png" alt="class"></p><p> 需要在constructor上面先声明</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">name11</span>:<span class="built_in">string</span></span><br><span class="line">    <span class="attr">age11</span>:<span class="built_in">number</span></span><br><span class="line">    <span class="attr">sub11</span>:<span class="built_in">boolean</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure><h3 id="类的修饰符"><a href="#类的修饰符" class="headerlink" title="类的修饰符"></a>类的修饰符</h3><blockquote><p> 总共有三个：public private protected</p></blockquote><ul><li>public(class默认)：class定义的属性或方法内部外部都能访问</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="keyword">public</span> <span class="attr">name11</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="attr">age11</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="attr">sub11</span>: <span class="built_in">boolean</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name11</span>);  <span class="comment">// fsllala</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">age11</span>); <span class="comment">// 18</span></span><br></pre></td></tr></table></figure><ul><li>private：只能在内部访问</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="keyword">public</span> <span class="attr">name11</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="keyword">private</span> <span class="attr">age11</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="attr">sub11</span>: <span class="built_in">boolean</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name11</span>);  <span class="comment">// fsllala</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">age11</span>); <span class="comment">// 这里会报错，提示: 属性“age11”为私有属性，只能在类“Person”中访问</span></span><br></pre></td></tr></table></figure><ul><li>protected：只能在内部和继承的子类中访问 不能在外部访问</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="keyword">public</span> <span class="attr">name11</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="keyword">private</span> <span class="attr">age11</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="keyword">protected</span> <span class="attr">sub11</span>: <span class="built_in">boolean</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Man</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Person</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">super</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name11</span>);</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">age11</span>);  <span class="comment">// 这里会报错，提示: 属性“age11”为私有属性，只能在类“Person”中访问</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">sub11</span>); <span class="comment">// 这里没问题,因为是继承的子类</span></span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="static-静态属性-和-静态方法"><a href="#static-静态属性-和-静态方法" class="headerlink" title="static 静态属性 和 静态方法"></a>static 静态属性 和 静态方法</h3><blockquote><p>静态方法中的this指向类本身，非静态方法的this指向实例对象；</p><p>即：静态方法中的this，只能调用<code>static</code>定义的属性或方法；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="keyword">public</span> <span class="attr">name11</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="keyword">private</span> <span class="attr">age11</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="keyword">protected</span> <span class="attr">sub11</span>: <span class="built_in">boolean</span></span><br><span class="line">    <span class="keyword">static</span> <span class="attr">aaa</span>:<span class="built_in">string</span>=<span class="string">&quot;静态属性直接赋值&quot;</span>;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">static</span> <span class="title function_">run</span>():<span class="built_in">string</span>&#123;</span><br><span class="line">        <span class="comment">// this.name11;  //这里会报错，提示:  类型“typeof Person”上不存在属性“name11”。</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">aaa</span>; <span class="comment">//这里没问题,静态方法中的this指向对象本身</span></span><br><span class="line">        <span class="keyword">return</span> <span class="string">&quot;静态方法中的this指向对象本身&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span>.<span class="property">aaa</span>);<span class="comment">// 静态属性直接赋值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span>.<span class="title function_">run</span>());<span class="comment">// 静态方法中的this指向对象本身</span></span><br></pre></td></tr></table></figure><h3 id="interface-定义类"><a href="#interface-定义类" class="headerlink" title="interface 定义类"></a>interface 定义类</h3><blockquote><p>TS interface 定义类，使用关键字 implements ；后面跟interface的名字，多个用逗号隔开；继承还是用extends；</p><p>与C#或Java里接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种契约。</p><p>extends可以接口继承接口，可以类继承类；implements是类实现接口；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">PersonClass</span> &#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="attr">type</span>: <span class="built_in">boolean</span>): <span class="built_in">boolean</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">PersonClass2</span> &#123;</span><br><span class="line">    <span class="title function_">set</span>(): <span class="built_in">void</span>,</span><br><span class="line">    <span class="attr">asd</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">A</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = <span class="string">&quot;123&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> <span class="keyword">extends</span> <span class="title class_ inherited__">A</span> <span class="keyword">implements</span> <span class="title class_">PersonClass</span>, <span class="title class_">PersonClass2</span> &#123;</span><br><span class="line">    <span class="attr">asd</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">super</span>()</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">asd</span> = <span class="string">&#x27;123&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params"><span class="keyword">type</span>: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">type</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">set</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="抽象类"><a href="#抽象类" class="headerlink" title="抽象类"></a>抽象类</h3><blockquote><p>应用场景：如果你写的类实例化之后毫无用处此时我可以把他定义为抽象类</p><p>或者你也可以把他作为一个基类-&gt; 通过继承一个派生类去实现基类的一些方法</p></blockquote><ul><li>下面这段代码会报错，因为抽象类无法被实例化</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">abstract</span> <span class="keyword">class</span> <span class="title class_">A</span> &#123;</span><br><span class="line">   <span class="keyword">public</span> <span class="attr">name</span>:<span class="built_in">string</span></span><br><span class="line">   </span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">new</span> <span class="title function_">A</span>()</span><br></pre></td></tr></table></figure><ul><li>我们在A类定义了 getName 抽象方法但未实现；</li><li>我们B类实现了A定义的抽象方法 如果实现就不报错 <strong>我们定义的抽象方法必须在派生类实现</strong></li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">abstract</span> <span class="keyword">class</span> <span class="title class_">A</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//没有 abstract 的可以直接定义方法</span></span><br><span class="line">    <span class="title function_">setName</span>(<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 方法“getName”不能具有实现，因为它标记为抽象。</span></span><br><span class="line">    <span class="keyword">abstract</span> <span class="title function_">getName</span>(): <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">B</span> <span class="keyword">extends</span> <span class="title class_ inherited__">A</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">super</span>(<span class="string">&#x27;lala&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">getName</span>(): <span class="built_in">string</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">name</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = <span class="keyword">new</span> <span class="title function_">B</span>();</span><br><span class="line">b.<span class="title function_">setName</span>(<span class="string">&quot;haha~&quot;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b.<span class="title function_">getName</span>()); <span class="comment">// haha~</span></span><br></pre></td></tr></table></figure><h2 id="元组类型"><a href="#元组类型" class="headerlink" title="元组类型"></a>元组类型</h2><ul><li>元组就是数组的变种；</li><li>如果需要一个固定大小的不同类型值的集合，我们需要使用元组；</li><li>元组（Tuple）是固定数量的不同类型的元素的组合。</li><li>元组与集合的不同之处在于，元组中的元素类型可以是不同的，而且数量固定。元组的好处在于可以把多个元素作为一个单元传递。如果一个方法需要返回多个值，可以把这多个值作为元组返回，而不需要创建额外的类来表示。</li></ul><figure class="highlight typescript"><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"><span class="keyword">let</span> <span class="attr">arr</span>: [<span class="built_in">number</span>, <span class="built_in">string</span>] = [<span class="number">1</span>, <span class="string">&#x27;string&#x27;</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr2</span>: <span class="keyword">readonly</span> [<span class="built_in">number</span>, <span class="built_in">boolean</span>, <span class="built_in">string</span>, <span class="literal">undefined</span>] = [<span class="number">1</span>, <span class="literal">true</span>, <span class="string">&#x27;sring&#x27;</span>, <span class="literal">undefined</span>] </span><br></pre></td></tr></table></figure><p>当赋值或访问一个已知索引的元素时，会得到正确的类型：</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>:[<span class="built_in">number</span>,<span class="built_in">string</span>] = [<span class="number">1</span>,<span class="string">&#x27;string&#x27;</span>]</span><br><span class="line">arr[<span class="number">0</span>].<span class="property">length</span> <span class="comment">// 这里会报错,提示：类型“number”上不存在属性“length”</span></span><br><span class="line">arr[<span class="number">1</span>].<span class="property">length</span> <span class="comment">// 这里 么的问题</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">//数字是没有length 的</span></span><br></pre></td></tr></table></figure><p>越界元素</p><figure class="highlight typescript"><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"><span class="comment">// 对于越界的元素他的类型被限制为 联合类型（就是你在元组中定义的类型）==&gt;  string | number[]</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>:[<span class="built_in">number</span>,<span class="built_in">string</span>] = [<span class="number">1</span>,<span class="string">&#x27;string&#x27;</span>];</span><br><span class="line">arr.<span class="title function_">push</span>(<span class="built_in">boolean</span>); <span class="comment">// 这里会报错,提示： “boolean”仅表示类型，但在此处却作为值使用。</span></span><br><span class="line">arr.<span class="title function_">push</span>(<span class="number">1</span>);<span class="comment">// 这里 么的问题</span></span><br></pre></td></tr></table></figure><p>应用场景 例如定义excel返回的数据</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">excel</span>: [<span class="built_in">string</span>, <span class="built_in">string</span>, <span class="built_in">number</span>, <span class="built_in">string</span>][] = [</span><br><span class="line">    [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;name&#x27;</span>, <span class="number">1</span>, <span class="string">&#x27;123&#x27;</span>],</span><br><span class="line">    [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;name&#x27;</span>, <span class="number">1</span>, <span class="string">&#x27;123&#x27;</span>],</span><br><span class="line">    [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;name&#x27;</span>, <span class="number">1</span>, <span class="string">&#x27;123&#x27;</span>],</span><br><span class="line">    [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;name&#x27;</span>, <span class="number">1</span>, <span class="string">&#x27;123&#x27;</span>],</span><br><span class="line">    [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;name&#x27;</span>, <span class="number">1</span>, <span class="string">&#x27;123&#x27;</span>],</span><br><span class="line">];</span><br></pre></td></tr></table></figure><h2 id="枚举类型"><a href="#枚举类型" class="headerlink" title="枚举类型"></a>枚举类型</h2><ul><li>在JavaScript中是没有枚举的概念的TS帮我们定义了枚举这个类型；</li><li>使用枚举：通过enum关键字定义我们的枚举；</li><li>作用：定义常量，约束统一；</li></ul><h3 id="数字枚举"><a href="#数字枚举" class="headerlink" title="数字枚举"></a>数字枚举</h3><p>例如 红绿蓝 Red &#x3D; 0 Green &#x3D; 1 Blue&#x3D; 2 分别代表红色0 绿色为1 蓝色为2</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Red</span>,</span><br><span class="line">    <span class="title class_">Green</span>,</span><br><span class="line">    <span class="title class_">Blue</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Red</span>); <span class="comment">//0</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Green</span>); <span class="comment">//1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Blue</span>); <span class="comment">//2</span></span><br></pre></td></tr></table></figure><p>这样写就可以实现应为ts定义的枚举中的每一个组员默认都是从0开始的所以也就是</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Red</span> = <span class="number">0</span>,</span><br><span class="line">    <span class="title class_">Green</span> = <span class="number">1</span>,</span><br><span class="line">    <span class="title class_">Blue</span> = <span class="number">2</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Red</span>); <span class="comment">//0</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Green</span>); <span class="comment">//1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Blue</span>); <span class="comment">//2</span></span><br><span class="line"><span class="comment">//默认就是从0开始的 可以不写值</span></span><br></pre></td></tr></table></figure><p>增长枚举</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Red</span> = <span class="number">5</span>,</span><br><span class="line">    <span class="title class_">Green</span>,</span><br><span class="line">    <span class="title class_">Blue</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Red</span>); <span class="comment">//5</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Green</span>); <span class="comment">//6</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Blue</span>); <span class="comment">//7</span></span><br></pre></td></tr></table></figure><p>自定义枚举</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Red</span> = <span class="number">5</span>,</span><br><span class="line">    <span class="title class_">Green</span> = <span class="number">13</span>,</span><br><span class="line">    <span class="title class_">Blue</span> = <span class="number">18</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Red</span>); <span class="comment">//5</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Green</span>); <span class="comment">//13</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Blue</span>); <span class="comment">//18</span></span><br></pre></td></tr></table></figure><h3 id="字符串枚举"><a href="#字符串枚举" class="headerlink" title="字符串枚举"></a>字符串枚举</h3><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span>&#123;</span><br><span class="line">    <span class="title class_">Red</span> = <span class="string">&#x27;red&#x27;</span>,</span><br><span class="line">    <span class="title class_">Green</span> = <span class="string">&#x27;green&#x27;</span>,</span><br><span class="line">    <span class="title class_">Blue</span> = <span class="string">&#x27;blue&#x27;</span></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Red</span>); <span class="comment">//red</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Green</span>); <span class="comment">//green</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Blue</span>); <span class="comment">//blue</span></span><br></pre></td></tr></table></figure><h3 id="异构枚举"><a href="#异构枚举" class="headerlink" title="异构枚举"></a>异构枚举</h3><p>枚举可以混合字符串和数字成员</p><figure class="highlight typescript"><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"><span class="keyword">enum</span> <span class="title class_">Color</span>&#123;</span><br><span class="line">    <span class="title class_">No</span> = <span class="string">&quot;No&quot;</span>,</span><br><span class="line">    <span class="title class_">Yes</span> = <span class="number">1</span>,</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure><h3 id="接口枚举"><a href="#接口枚举" class="headerlink" title="接口枚举"></a>接口枚举</h3><p>定义一个枚举Color 定义一个接口AA 他有一个属性red 值为Color.Yes</p><p>声明对象的时候要遵循这个规则</p><figure class="highlight typescript"><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="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">No</span> = <span class="string">&quot;No&quot;</span>,</span><br><span class="line">    <span class="title class_">Yes</span> = <span class="number">1</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> AA &#123;</span><br><span class="line">    <span class="attr">red</span>: <span class="title class_">Color</span>.<span class="property">Yes</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj1</span>: <span class="variable constant_">AA</span> = &#123;</span><br><span class="line">    <span class="comment">// 下面两种写法都可以</span></span><br><span class="line">    <span class="comment">// red: Color.Yes</span></span><br><span class="line">    <span class="attr">red</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="const枚举"><a href="#const枚举" class="headerlink" title="const枚举"></a>const枚举</h3><blockquote><p>大多数情况下，枚举是十分有效的方案。 然而在某些情况下需求很严格。 为了避免在额外生成的代码上的开销和额外的非直接的对枚举成员的访问，我们可以使用 <code>const</code>枚举。 常量枚举通过在枚举上使用 <code>const</code>修饰符来定义</p></blockquote><ul><li>let 和 var 都是不允许声明enum的，只能使用const声明</li><li>const 声明的枚举会被编译成常量</li><li>普通声明的枚举编译完后是个对象</li></ul><ol><li>普通声明编译之后</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Yes</span>,</span><br><span class="line">    <span class="title class_">No</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">code</span>: <span class="built_in">number</span> = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">if</span> (code === <span class="title class_">Color</span>.<span class="property">No</span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>JS:</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="title class_">Color</span>;</span><br><span class="line">(<span class="keyword">function</span> (<span class="params">Color</span>) &#123;</span><br><span class="line">    <span class="title class_">Color</span>[<span class="title class_">Color</span>[<span class="string">&quot;Yes&quot;</span>] = <span class="number">0</span>] = <span class="string">&quot;Yes&quot;</span>;</span><br><span class="line">    <span class="title class_">Color</span>[<span class="title class_">Color</span>[<span class="string">&quot;No&quot;</span>] = <span class="number">1</span>] = <span class="string">&quot;No&quot;</span>;</span><br><span class="line">&#125;)(<span class="title class_">Color</span> || (<span class="title class_">Color</span> = &#123;&#125;));</span><br><span class="line"><span class="keyword">var</span> code = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">if</span> (code === <span class="title class_">Color</span>.<span class="property">No</span>) &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>const声明编译之后</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Yes</span>,</span><br><span class="line">    <span class="title class_">No</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">code</span>: <span class="built_in">number</span> = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">if</span> (code === <span class="title class_">Color</span>.<span class="property">No</span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>JS:</p><figure class="highlight js"><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"><span class="keyword">var</span> code = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">if</span> (code === <span class="number">1</span> <span class="comment">/* Color.No */</span>) &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="反向映射"><a href="#反向映射" class="headerlink" title="反向映射"></a>反向映射</h3><ul><li>它包含了正向映射（ <code>name</code> -&gt; <code>value</code>）和反向映射（ <code>value</code> -&gt; <code>name</code>）</li><li>要注意的是 <em>不会</em>为字符串枚举成员生成反向映射。</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Enum</span> &#123;</span><br><span class="line">    success</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">result</span>: <span class="built_in">number</span> = <span class="title class_">Enum</span>.<span class="property">success</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">//0</span></span><br><span class="line"><span class="keyword">let</span> result2 = <span class="title class_">Enum</span>[result];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result2); <span class="comment">//success</span></span><br></pre></td></tr></table></figure><h2 id="类型推论-类型别名"><a href="#类型推论-类型别名" class="headerlink" title="类型推论|类型别名"></a>类型推论|类型别名</h2><h3 id="类型推论"><a href="#类型推论" class="headerlink" title="类型推论"></a>类型推论</h3><blockquote><p>我声明了一个变量但是没有定义类型</p><p>TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/lxtl1675250862922.png" alt="类型推论"></p><figure class="highlight typescript"><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"><span class="keyword">let</span> str = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="comment">// 会报错，虽然我们没用明确限制类型，但是TS编辑器会自动推论为string类型。就不能够在赋值给别的类型</span></span><br><span class="line">str = <span class="number">18</span>;  <span class="comment">//这里会报错,提示: 不能将类型“number”分配给类型“string”。 </span></span><br></pre></td></tr></table></figure><p>如果你声明变量没有定义类型也没有赋值这时候 TS 会推断成 any 类型可以进行任何操作</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str<span class="comment">//为any类型</span></span><br><span class="line">str = <span class="number">123</span></span><br><span class="line">str = <span class="string">&quot;马杀鸡&quot;</span></span><br><span class="line">str = <span class="literal">false</span></span><br><span class="line">str = []</span><br></pre></td></tr></table></figure><h3 id="类型别名"><a href="#类型别名" class="headerlink" title="类型别名"></a>类型别名</h3><blockquote><p>type 关键字（可以给一个类型定义一个名字）多用于复合类型</p></blockquote><ul><li>定义类型别名</li></ul><figure class="highlight typescript"><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"><span class="keyword">type</span> s = <span class="built_in">string</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>: s = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str); <span class="comment">// fsllala</span></span><br></pre></td></tr></table></figure><ul><li>联合类型：指定多种类型，在前文有提到；</li></ul><figure class="highlight typescript"><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"><span class="keyword">type</span> s = <span class="built_in">string</span>|<span class="built_in">number</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>:s = <span class="string">&quot;永恒的紫罗兰花园&quot;</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">num</span>:s = <span class="number">520</span><span class="comment">//这有这两种类型可以</span></span><br></pre></td></tr></table></figure><ul><li>定义函数别名</li></ul><figure class="highlight typescript"><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"><span class="keyword">type</span> s = <span class="function">() =&gt;</span> <span class="built_in">string</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>: s = <span class="function">() =&gt;</span> <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">str</span>()); <span class="comment">//fsllala</span></span><br></pre></td></tr></table></figure><ul><li>定义值的别名</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> value = <span class="built_in">boolean</span> | <span class="number">0</span> | <span class="string">&#x27;213&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//变量的值  只能是上面value定义的值</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">s</span>: value = <span class="string">&quot;213&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">s2</span>: value = <span class="string">&quot;111&quot;</span>; <span class="comment">//这里会报错,提示:  不能将类型“&quot;111&quot;”分配给类型“value”。</span></span><br></pre></td></tr></table></figure><h2 id="never类型"><a href="#never类型" class="headerlink" title="never类型"></a>never类型</h2><blockquote><p>TypeScript 将使用 never 类型来表示不应该存在的状态，也就是值永不存在的类型。</p></blockquote><ul><li>值会永不存在的两种情况：<ol><li>如果一个函数执行时抛出了<strong>异常</strong>，那么这个函数永远不存在返回值（因为抛出异常会直接中断程序运行，这使得程序运行不到返回值那一步，即具有不可达的终点，也就永不存在返回了）；</li><li>数中执行无限循环的代码（<strong>死循环</strong>），使得程序永远无法运行到函数返回值那一步，永不存在返回。</li></ol></li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 返回never的函数必须存在无法达到的终点</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">// 因为必定抛出异常，所以 error 将不会有返回值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">error</span>(<span class="params">message: <span class="built_in">string</span></span>): <span class="built_in">never</span> &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(message);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 因为存在死循环，所以 loop 将不会有返回值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">loop</span>(<span class="params"></span>): <span class="built_in">never</span> &#123;</span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>举一个我们可能会见到的例子：</p><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Foo</span> &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;保安&quot;</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Bar</span> &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;草莓&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">All</span> = <span class="title class_">Foo</span> | <span class="title class_">Bar</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">handleValue</span>(<span class="params">val: All</span>) &#123;</span><br><span class="line">    <span class="keyword">switch</span> (val.<span class="property">type</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;保安&#x27;</span>:</span><br><span class="line">            <span class="comment">// 这里 val 被收窄为 Foo</span></span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;草莓&#x27;</span>:</span><br><span class="line">            <span class="comment">// val 在这里是 Bar</span></span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            <span class="comment">//兜底逻辑 一般是不会进入这儿  如果进来了就是程序异常了</span></span><br><span class="line">            <span class="comment">// val 在这里是 never</span></span><br><span class="line">            <span class="keyword">const</span> <span class="attr">exhaustiveCheck</span>: <span class="built_in">never</span> = val</span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">handleValue</span>(&#123; <span class="attr">type</span>: <span class="string">&quot;草莓&quot;</span> &#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure><blockquote><p>比如新来了一个同事他新增了一个C接口，我们必须手动找到所有 switch 代码并处理，否则将有可能引入 BUG 。</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Foo</span> &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;保安&quot;</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Bar</span> &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;草莓&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> C &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;卷心菜&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">All</span> = <span class="title class_">Foo</span> | <span class="title class_">Bar</span> | C</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">handleValue</span>(<span class="params">val: All</span>) &#123;</span><br><span class="line">    <span class="keyword">switch</span> (val.<span class="property">type</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;保安&#x27;</span>:</span><br><span class="line">            <span class="comment">// 这里 val 被收窄为 Foo</span></span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;草莓&#x27;</span>:</span><br><span class="line">            <span class="comment">// val 在这里是 Bar</span></span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            <span class="comment">//兜底逻辑 一般是不会进入这儿  如果进来了就是程序异常了</span></span><br><span class="line">            <span class="keyword">const</span> <span class="attr">exhaustiveCheck</span>: <span class="built_in">never</span> = val;  <span class="comment">// 这里会报错,会提示: 不能将类型“C”分配给类型“never”</span></span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">handleValue</span>(&#123; <span class="attr">type</span>: <span class="string">&quot;草莓&quot;</span> &#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure><blockquote><p>所以通过这个办法，你可以确保 handleValue 总是穷尽 (exhaust) 了所有 All 的可能类型。</p></blockquote><h2 id="symbol类型"><a href="#symbol类型" class="headerlink" title="symbol类型"></a>symbol类型</h2><blockquote><p>ES6 引入了一种新的基本数据类型<code>Symbol</code>，表示独一无二的值；</p><p>内存地址的指针位置不同，所以是唯一值；</p></blockquote><ul><li><a href="https://es6.ruruanyifeng.com/#docs/symbol">阮一峰</a></li><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol">MDN</a></li><li><a href="https://zhuanlan.zhihu.com/p/22652486">JS 中的 Symbol 是什么？</a></li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Symbol(params)为基本数据类型,所以不能new;</span></span><br><span class="line"><span class="comment"> * params 可以不传,没啥实际意义,唯一作用是为了区分声明的symbol</span></span><br><span class="line"><span class="comment"> * params 一般传 number或者string</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">name1</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">name2</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">age</span>:<span class="built_in">symbol</span>=<span class="title class_">Symbol</span>(<span class="number">18</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//这个值看似一样，其实因为内存地址指针位置不同，所以是唯一值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1 === name2);  <span class="comment">// false</span></span><br></pre></td></tr></table></figure><ul><li>普通方法获取不到对象中的symbol属性</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">name1</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">name2</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">age</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="number">18</span>);</span><br><span class="line"><span class="keyword">let</span> obj1 = &#123;</span><br><span class="line">    [name1]: <span class="string">&quot;forward&quot;</span>,</span><br><span class="line">    [age]: <span class="number">24</span>,</span><br><span class="line">    <span class="attr">sex</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">height</span>: <span class="number">173</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i <span class="keyword">in</span> obj1) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(i); <span class="comment">// //只会打印出sex跟height，[name1]与[age]将打印不出来</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">keys</span>(obj1));  <span class="comment">// [ &#x27;sex&#x27;, &#x27;height&#x27; ]</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">getOwnPropertyNames</span>(obj1));  <span class="comment">// [ &#x27;sex&#x27;, &#x27;height&#x27; ]</span></span><br></pre></td></tr></table></figure><ul><li>获取对象中的symbol的属性的两种方式</li></ul><blockquote><p>静态方法 Reflect.ownKeys() 返回一个由目标对象自身的属性键组成的数组(Array)。</p><p>语法：Reflect.ownKeys(target) &#x3D;&gt; target 获取自身属性键的目标对象。</p><p>Reflect.ownKeys 方法返回一个由目标对象自身的属性键组成的<strong>数组</strong>。它的返回值等同于 Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target) ) 。</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">name1</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">name2</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">age</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="number">18</span>);</span><br><span class="line"><span class="keyword">let</span> obj1 = &#123;</span><br><span class="line">    [name1]: <span class="string">&quot;forward&quot;</span>,</span><br><span class="line">    [age]: <span class="number">24</span>,</span><br><span class="line">    <span class="attr">sex</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">height</span>: <span class="number">173</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//能打印出来两个Symbol，另外两个普通的不会打印出来</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">getOwnPropertySymbols</span>(obj1)); <span class="comment">// [ Symbol(fsllala), Symbol(18) ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Reflect.ownKeys() 此属性是将所有的属性都列出来</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Reflect</span>.<span class="title function_">ownKeys</span>(obj1)); <span class="comment">//[ &#x27;sex&#x27;, &#x27;height&#x27;, Symbol(fsllala), Symbol(18) ]</span></span><br></pre></td></tr></table></figure><h3 id="Symbol-iterator-迭代器-和-生成器-for-of"><a href="#Symbol-iterator-迭代器-和-生成器-for-of" class="headerlink" title="Symbol.iterator 迭代器 和 生成器 for of"></a>Symbol.iterator 迭代器 和 生成器 for of</h3><ul><li>一般来说Object对象是不能通过for…of来进行遍历的；</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj1 = &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">    <span class="attr">sex</span>:<span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里会报错</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">of</span> obj1); <span class="comment">// 类型“&#123; name: string; age: number; sex: number; &#125;”必须具有返回迭代器的 &quot;[Symbol.iterator]()&quot; 方法。</span></span><br></pre></td></tr></table></figure><ul><li>可以给Object对象提供一个Iterator方法，使对象也能使用for…of遍历；</li></ul><blockquote><ul><li>迭代器:Symbol.iterator</li></ul><p>要知道js的迭代器，我们就要先知道迭代的意思，实际上迭代的本意是遍历，随着不断有新的数据类型加入，我们就要用不同的for语句去循环，这就显得很麻烦，所以就有了迭代的概念 </p><ul><li>迭代</li></ul><p>所有数据类型的遍历都遵循的一个协议。所以以后你对遵循了迭代协议的数据类型 你只需要用迭代去遍历就可以了。顺便一提：for…of是用迭代器来实现的，只要你能用for…of来遍历的数据都是实现了迭代协议的数据</p><ul><li>实现的迭代协议的数据类型：</li></ul><p>string，array，map，set，arguments，Nodelist等dom元素 ；注意注意；<strong>没有object</strong> </p><ul><li>生成器: for…of</li></ul><p>for…of 会遍历可迭代的对象，调用对象上的 Symbol.iterator 方法。(此对象非彼对象，这个对 象是指你即将下手的目标)</p><p>对象也是不支持的，因为对象没用 Symbol.iterator 方法。</p></blockquote><h4 id="迭代器"><a href="#迭代器" class="headerlink" title="迭代器"></a>迭代器</h4><blockquote><p>迭代器Iterator 的用法</p><ol><li><p>Iterator 是 es6 引入的一种新的遍历机制 ，两个核心：</p><ol><li>迭代器是一个统一的接口，它的作用是使各种 数据结构 可被便捷的访问，它是通过一个键为 Symbol.iterator 的方法来实现。</li><li>迭代器是用于 遍历 数据结构元素的指针（如数据库中的游标）。</li></ol></li><li><p>使用迭代：</p><ol><li>实现的迭代协议的数据类型，里面都会有一个 [Symbol.iterator]方法</li><li>进行迭代的时候用迭代器的next来取值，这个next返回的是一个对象：<code>&#123;value：value,done:&quot;是否完成遍历&quot;&#125;</code></li><li>当 value是underfined 、done 为 true 时则遍历结束</li></ol></li><li><p>实现的迭代协议的数据类型：</p><p><code>string、array、map、set、arguments、Nodelist等dom元素;注意注意；没有object  </code></p></li></ol></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="attr">str</span>: <span class="built_in">string</span> = <span class="string">&quot;fsl&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">iterator</span>: <span class="title class_">Iterator</span>&lt;<span class="built_in">string</span>&gt; = str[<span class="title class_">Symbol</span>.<span class="property">iterator</span>]();</span><br><span class="line"></span><br><span class="line"><span class="comment">//next一次只遍历一个数，下一次调用将从上一次遍历到的位置开始下一个</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// &#123; value: &#x27;f&#x27;, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// &#123; value: &#x27;s&#x27;, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// &#123; value: &#x27;l&#x27;, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// &#123; value: undefined, done: true &#125;</span></span><br><span class="line"><span class="comment">//返回的有两个属性，一个value，一个done。value当读取到值的时候，done为false、读取不到为true</span></span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="title class_">Array</span>&lt;<span class="built_in">number</span>&gt; = [<span class="number">1</span>, <span class="number">5</span>, <span class="number">6</span>]; <span class="comment">// 泛型</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">iterator</span>: <span class="title class_">Iterator</span>&lt;<span class="built_in">number</span>&gt; = arr[<span class="title class_">Symbol</span>.<span class="property">iterator</span>]()<span class="comment">//注意这里的接收类型&lt;number&gt;是固定要写的</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//next一次只遍历一个数，下一次调用将从上一次遍历到的位置开始下一个</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">//&#123; value: 1, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">//&#123; value: 5, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">//&#123; value: 6, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">//&#123; value: undefined, done: true &#125;</span></span><br><span class="line"><span class="comment">//返回的有两个属性，一个value，一个done。value当读取到值的时候，done为false、读取不到为true</span></span><br></pre></td></tr></table></figure><ul><li>实现一个简易的迭代器</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="title class_">Array</span>&lt;<span class="built_in">number</span> | <span class="built_in">string</span>&gt; = [<span class="string">&quot;泛型&quot;</span>, <span class="string">&quot;实现简单的迭代器&quot;</span>];</span><br><span class="line"><span class="keyword">let</span> <span class="attr">set</span>: <span class="title class_">Set</span>&lt;<span class="built_in">number</span>&gt; = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]);   </span><br><span class="line"><span class="keyword">function</span> <span class="title function_">iteratorFun</span>(<span class="params">args: <span class="built_in">any</span></span>): <span class="built_in">void</span> &#123; <span class="comment">//这里定义为any类型是因为上面要传到这里的有多种不同类型</span></span><br><span class="line">    <span class="keyword">const</span> <span class="attr">it</span>: <span class="title class_">Iterator</span>&lt;<span class="built_in">any</span>&gt; = args[<span class="title class_">Symbol</span>.<span class="property">iterator</span>]();</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">next</span>: <span class="built_in">any</span> = &#123; <span class="attr">done</span>: <span class="literal">false</span> &#125;;</span><br><span class="line">    <span class="keyword">while</span> (!next.<span class="property">done</span>) &#123; <span class="comment">//判断next，由于next默认为fasle，while循环只有true会通过，所以需要 取反</span></span><br><span class="line">        next = it.<span class="title function_">next</span>(); <span class="comment">//刚开始是声明next给个默认值，等到开始循环的时候再把真正的值赋给他</span></span><br><span class="line">        <span class="keyword">if</span> (!next.<span class="property">done</span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(next);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">iteratorFun</span>(arr);</span><br><span class="line"><span class="title function_">iteratorFun</span>(set);</span><br></pre></td></tr></table></figure><h2 id="泛型"><a href="#泛型" class="headerlink" title="泛型"></a>泛型</h2><blockquote><p>泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候在指定类型的一种特性</p></blockquote><h3 id="函数泛型"><a href="#函数泛型" class="headerlink" title="函数泛型"></a>函数泛型</h3><p>我写了两个函数一个是数字类型的函数，另一个是字符串类型的函数,其实就是类型不同，实现的功能是一样的，这时候我们就可以使用泛型来优化。</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">num</span>(<span class="params">a: <span class="built_in">number</span>, b: <span class="built_in">number</span></span>): <span class="title class_">Array</span>&lt;<span class="built_in">number</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> [a, b];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">str</span>(<span class="params">a: <span class="built_in">string</span>, b: <span class="built_in">string</span></span>): <span class="title class_">Array</span>&lt;<span class="built_in">string</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> [a, b];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">num</span>(<span class="number">1</span>, <span class="number">2</span>));  <span class="comment">// [ 1, 2 ]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">str</span>(<span class="string">&#x27;fsllala&#x27;</span>, <span class="string">&#x27;18&#x27;</span>)); <span class="comment">// [ &#x27;fsllala&#x27;, &#x27;18&#x27; ]</span></span><br></pre></td></tr></table></figure><ul><li>泛型优化</li></ul><blockquote><p>语法为函数名字后面跟一个&lt;参数名&gt; 参数名可以随便写 例如我这儿写了T；</p><p>当我们使用这个函数的时候把参数的类型传进去就可以了 （也就是动态类型）；</p><p>即：定义这个函数的时候，不定义参数的类型，而是让调用者告知我这里的参数是什么类型；</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> add&lt;T&gt;(<span class="attr">a</span>: T, <span class="attr">b</span>: T): <span class="title class_">Array</span>&lt;T&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> [a, b];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">add&lt;<span class="built_in">number</span>&gt;(<span class="number">1</span>,<span class="number">2</span>);</span><br><span class="line">add&lt;<span class="built_in">string</span>&gt;(<span class="string">&quot;fsllala&quot;</span>,<span class="string">&#x27;18&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//甚至我们可以简写</span></span><br><span class="line"><span class="title function_">add</span>(<span class="number">1</span>,<span class="number">2</span>)</span><br><span class="line"><span class="title function_">add</span>(<span class="string">&#x27;1&#x27;</span>,<span class="string">&#x27;2&#x27;</span>)<span class="comment">//编辑器会自动推断类型，但最好还是写一下，如果你知道你具体需要的是什么的话</span></span><br></pre></td></tr></table></figure><blockquote><p>我们也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> sub&lt;T, U&gt;(<span class="attr">a</span>: T, <span class="attr">b</span>: U): <span class="title class_">Array</span>&lt;T | U&gt; &#123;</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">arr</span>: <span class="title class_">Array</span>&lt;T | U&gt; = [a, b];</span><br><span class="line">    <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">sub&lt;<span class="built_in">number</span>,<span class="built_in">boolean</span>&gt;(<span class="number">66</span>,<span class="literal">true</span>);</span><br></pre></td></tr></table></figure><h3 id="泛型接口"><a href="#泛型接口" class="headerlink" title="泛型接口"></a>泛型接口</h3><blockquote><p>声明接口的时候 在名字后面加一个 &lt;参数&gt;</p><p>使用的时候传递类型</p></blockquote><ul><li>使用含有泛型的接口来定义对象的形状：</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">IKun</span>&lt;T&gt; &#123;</span><br><span class="line">    <span class="attr">name</span>: T,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">hobby</span>: T[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun</span>: <span class="title class_">IKun</span>&lt;<span class="built_in">string</span>&gt; = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;lala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">hobby</span>: [<span class="string">&quot;唱&quot;</span>, <span class="string">&quot;跳&quot;</span>, <span class="string">&quot;rap&quot;</span>, <span class="string">&quot;篮球&quot;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>泛型接口默认值</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">IKun</span>&lt;T = <span class="built_in">string</span>&gt; &#123;</span><br><span class="line">    <span class="attr">name</span>: T,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">hobby</span>: T[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里不写类型就会走默认值</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun</span>: <span class="title class_">IKun</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;lala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">hobby</span>: [<span class="string">&quot;唱&quot;</span>, <span class="string">&quot;跳&quot;</span>, <span class="string">&quot;rap&quot;</span>, <span class="string">&quot;篮球&quot;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>使用含有泛型的接口来定义函数的形状：</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">CreateArrayFunc</span>&lt;T&gt; &#123;</span><br><span class="line">    (<span class="attr">length</span>: <span class="built_in">number</span>, <span class="attr">value</span>: T): <span class="title class_">Array</span>&lt;T&gt;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">createArrayFunc</span>: <span class="title class_">CreateArrayFunc</span>&lt;<span class="built_in">string</span>&gt;;</span><br><span class="line"></span><br><span class="line">createArrayFunc = <span class="keyword">function</span> &lt;T&gt;(<span class="attr">length</span>: <span class="built_in">number</span>, <span class="attr">value</span>: T): <span class="title class_">Array</span>&lt;T&gt; &#123;</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">result</span>: T[] = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; length; i++) &#123;</span><br><span class="line">        result[i] = value;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> results = <span class="title function_">createArrayFunc</span>(<span class="number">3</span>, <span class="string">&quot;x&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(results);  <span class="comment">// [ &#x27;x&#x27;, &#x27;x&#x27;, &#x27;x&#x27; ]</span></span><br></pre></td></tr></table></figure><h3 id="泛型类"><a href="#泛型类" class="headerlink" title="泛型类"></a>泛型类</h3><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Point</span>&lt;T&gt;&#123;</span><br><span class="line">    <span class="attr">x</span>: T</span><br><span class="line">    <span class="attr">y</span>: T</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">x: T, y: T</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">x</span> = x;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">y</span> = y;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> point1 = <span class="keyword">new</span> <span class="title class_">Point</span>&lt;<span class="built_in">number</span>&gt;(<span class="number">11</span>, <span class="number">22</span>);</span><br><span class="line"><span class="keyword">const</span> point2 = <span class="keyword">new</span> <span class="title class_">Point</span>&lt;<span class="built_in">string</span>&gt;(<span class="string">&#x27;11&#x27;</span>, <span class="string">&#x27;22&#x27;</span>);</span><br></pre></td></tr></table></figure><h3 id="泛型约束"><a href="#泛型约束" class="headerlink" title="泛型约束"></a>泛型约束</h3><figure class="highlight typescript"><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"><span class="comment">// 下面代码是会报错的</span></span><br><span class="line"><span class="keyword">function</span> getLength&lt;T&gt;(<span class="attr">args</span>:T)&#123;</span><br><span class="line">    <span class="keyword">return</span> args.<span class="property">length</span>; <span class="comment">//这里会报错,提示: 类型“T”上不存在属性“length”。</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>使用<code>extends</code>关键字添加泛型约束；</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Ilength</span> &#123;</span><br><span class="line">    <span class="attr">length</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> getLength&lt;T <span class="keyword">extends</span> <span class="title class_">Ilength</span>&gt;(<span class="attr">args</span>: T) &#123;</span><br><span class="line">    <span class="keyword">return</span> args.<span class="property">length</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 只要传入的实参有length属性,且值是number类型的就行;</span></span><br><span class="line"><span class="comment">// 即：有number类型的length就实现了接口Len</span></span><br><span class="line"><span class="title function_">getLength</span>(<span class="string">&quot;123&quot;</span>);</span><br><span class="line"><span class="title function_">getLength</span>([<span class="number">1</span>, <span class="number">2</span>]);</span><br><span class="line"><span class="title function_">getLength</span>(&#123; <span class="attr">length</span>: <span class="number">77</span> &#125;);</span><br></pre></td></tr></table></figure><ul><li><p>使用<code>keyof </code>约束对象</p><p>平时在开发中我们可能会看到一些常用的名称：</p><ul><li>T：Type的缩写，类型；</li><li>K、V：key和value的缩写，键值对；</li><li>E：Element的缩写，元素；</li><li>O：Object的缩写，对象；</li></ul></li></ul><p>下面场景不会报错:</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> prop&lt;O&gt;(<span class="attr">obj</span>: O, keys) &#123;</span><br><span class="line">    <span class="keyword">return</span> obj[keys];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> info = &#123; <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span>, <span class="attr">c</span>: <span class="number">3</span> &#125;;</span><br><span class="line"><span class="title function_">prop</span>(info, <span class="string">&quot;a&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">prop</span>(info, <span class="string">&quot;d&quot;</span>));  <span class="comment">// undefined  现在没有 o[&quot;d&quot;];但是不报错;</span></span><br></pre></td></tr></table></figure><blockquote><p>解决方法：其中使用了TS泛型和泛型约束。使用<code>extends</code>关键字添加泛型约束，keyof操作符获取对象键的联合类型；</p></blockquote><ul><li>keyof 操作符</li></ul><figure class="highlight typescript"><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="keyword">interface</span> <span class="title class_">IKun</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">IKunKeys</span> = keyof <span class="title class_">IKun</span>; </span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * keyof 操作符获取 IKun 接口的所有键，它的返回类型是联合类型;以上写法等同于下面这个</span></span><br><span class="line"><span class="comment"> * type IKunKeys = &quot;name&quot;|&quot;age&quot; ; </span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun</span>: <span class="title class_">IKunKeys</span> = <span class="string">&quot;name&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun2</span>: <span class="title class_">IKunKeys</span> = <span class="string">&quot;age&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun3</span>: <span class="title class_">IKunKeys</span> = <span class="string">&quot;sex&quot;</span>; <span class="comment">// 不能将类型“&quot;sex&quot;”分配给类型“keyof IKun”</span></span><br></pre></td></tr></table></figure><blockquote><p>如上问题的解决：</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 用keyof 分隔 O,分隔完之后,就是联合类型: &quot;a&quot; | &quot;b&quot; | &quot;c&quot;,最后用K继承联合类型,即K就是联合类型:&quot;a&quot; | &quot;b&quot; | &quot;c&quot;</span></span><br><span class="line"><span class="keyword">function</span> prop&lt;O, K <span class="keyword">extends</span> keyof O&gt;(<span class="attr">obj</span>: O, <span class="attr">keys</span>: K) &#123;</span><br><span class="line">    <span class="keyword">return</span> obj[keys];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> info = &#123; <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span>, <span class="attr">c</span>: <span class="number">3</span> &#125;;</span><br><span class="line"><span class="title function_">prop</span>(info, <span class="string">&quot;a&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">prop</span>(info, <span class="string">&quot;d&quot;</span>));  <span class="comment">// 现在报错了,提示: 类型“&quot;d&quot;”的参数不能赋给类型“&quot;a&quot; | &quot;b&quot; | &quot;c&quot;”的参数。</span></span><br></pre></td></tr></table></figure><h3 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h3><p><a href="https://juejin.cn/post/7006483218765447182#heading-3">TS系列篇｜泛型</a></p><h2 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h2><blockquote><p>先来看一个现象：不同TS模块下会产生命名冲突：</p></blockquote><figure class="highlight typescript"><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"><span class="comment">// index.ts</span></span><br><span class="line"><span class="keyword">const</span> name1 = <span class="string">&quot;fsllala123&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1);</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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"><span class="comment">// index2.ts</span></span><br><span class="line"><span class="keyword">const</span> name1=<span class="string">&quot;fsllala456&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/namespace1675417635460.png" alt="模块化"></p><blockquote><p>什么是模块化？</p></blockquote><ul><li>JavaScript 规范声明任何没有 export 的 JavaScript 文件都应该被认为是一个脚本，而非一个模块。在一个脚本文件中，变量和类型会被声明在共享的全局作用域。</li><li>如果你有一个文件，现在没有任何 import 或者 export，但是你希望它被作为模块处理，添加这行代码； 这会把文件改成一个没有导出任何内容的模块，这个语法可以生效，无论你的模块目标是什么。</li></ul><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span>&#123;&#125;;</span><br></pre></td></tr></table></figure><h3 id="ES-Module"><a href="#ES-Module" class="headerlink" title="ES Module"></a>ES Module</h3><blockquote><p>TypeScript中最主要使用的模块化方案就是ES Module，也就是ES6的写法，详见文章<a href="https://fsllala.top/articles/4dee6fea.html">模块化规范</a>；</p></blockquote><blockquote><p>TS文件中，即使两个不同的TS文件，比如<code>index.ts</code>和<code>index2.ts</code>，命名同一个变量，也会起冲突。因为它的内容被视为全局可见的（因此对模块也是可见的）</p></blockquote><blockquote><p>TypeScript与ECMAScript 2015一样，任何包含顶级import或者export的文件都被当成一个模块。相反地，如果一个文件不带有顶级的import或者export声明，那么它的内容被视为全局可见的（因此对模块也是可见的）</p></blockquote><h4 id="ES6模块化"><a href="#ES6模块化" class="headerlink" title="ES6模块化"></a>ES6模块化</h4><ul><li>解决全局变量冲突(每个文件添加export{}即可)</li></ul><figure class="highlight typescript"><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"><span class="comment">// index.ts</span></span><br><span class="line"><span class="keyword">const</span> name1 = <span class="string">&quot;fsllala123&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1);<span class="comment">// fsllala123</span></span><br><span class="line"><span class="keyword">export</span>&#123;&#125;</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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"><span class="comment">// index2.ts</span></span><br><span class="line"><span class="keyword">const</span> name1=<span class="string">&quot;fsllala456&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1); <span class="comment">// fsllala456</span></span><br><span class="line"><span class="keyword">export</span>&#123;&#125;</span><br></pre></td></tr></table></figure><ul><li>模块化引用</li></ul><figure class="highlight typescript"><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"><span class="comment">// index.ts</span></span><br><span class="line"><span class="keyword">const</span> name1 = <span class="string">&quot;fsllala123&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> &#123; name1 &#125;</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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"><span class="comment">// index2.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; name1 &#125; <span class="keyword">from</span> <span class="string">&quot;./index&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1); <span class="comment">// fsllala123</span></span><br></pre></td></tr></table></figure><h4 id="内置类型导入"><a href="#内置类型导入" class="headerlink" title="内置类型导入"></a>内置类型导入</h4><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// type.ts 声明TS类型</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> <span class="title class_">IKun</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">hobby</span>: <span class="built_in">string</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">type</span> <span class="title class_">IPerson</span> = <span class="built_in">string</span> | <span class="built_in">number</span>;</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js 使用</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这两种写法都可以  使用 type 前缀,表明被导入的是一个类型;</span></span><br><span class="line"><span class="comment">// import &#123; type IKun, type IPerson &#125; from &quot;./type&quot;;</span></span><br><span class="line"><span class="keyword">import</span> <span class="keyword">type</span> &#123; <span class="title class_">IKun</span>, <span class="title class_">IPerson</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./type&quot;</span>; <span class="comment">// 相当于把type提出来了</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person1</span>: <span class="title class_">IPerson</span> = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun</span>: <span class="title class_">IKun</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;xiaoheizi&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">hobby</span>: [<span class="string">&quot;唱&quot;</span>, <span class="string">&quot;跳&quot;</span>, <span class="string">&quot;rap&quot;</span>, <span class="string">&quot;篮球&quot;</span>]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(kunkun);</span><br></pre></td></tr></table></figure><p>这里需要注意的是：不使用type前缀，也可以导入类型。那么为啥要加上type前缀呢？</p><blockquote><p>TS最终要被编译成JS代码，类型是没用的，通过语法识别TS&#x2F;JS的成本要比直接引入的时候就用type表明了是类型的成本大，到时候类型部分的代码就直接删除了；</p></blockquote><h3 id="namespace命名空间"><a href="#namespace命名空间" class="headerlink" title="namespace命名空间"></a>namespace命名空间</h3><ul><li><p>不同TS模块下会产生命名冲突：</p></li><li><p>我们在工作中无法避免全局变量造成的污染，TypeScript提供了namespace 避免这个问题出现</p><ul><li>内部模块，主要用于组织代码，避免命名冲突</li><li>命名空间内的类默认私有</li><li>通过 <code>namespace</code> 关键字定义，然后通过 <code>export</code> 暴露；(<code>namespace</code>里面如果不通过<code>export</code>暴露，那么外面访问不到)</li></ul></li></ul><h4 id="namespace常规写法"><a href="#namespace常规写法" class="headerlink" title="namespace常规写法"></a>namespace常规写法</h4><ul><li>namespace，里面不使用export：</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//不能获取到里面的属性,在命名空间外访问是一个空对象</span></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">    <span class="keyword">const</span> age1 = <span class="number">18</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>); <span class="comment">// &#123;&#125;</span></span><br></pre></td></tr></table></figure><ul><li>namespace，里面使用export：</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 可以获取到里面的属性了</span></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>); <span class="comment">// 是个对象 &#123; name1: &#x27;fsllala&#x27;, age1: 18 &#125;</span></span><br></pre></td></tr></table></figure><ul><li>同一模块(不同模块)下有重名的namespace，里面属性会合并</li></ul><blockquote><p>因为属性会合并，所以会出现以下情况：</p></blockquote><ul><li>重名namespace属性合并，情况一：</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不同命名空间的属性名不冲突</span></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>); <span class="comment">// &#123; name1: &#x27;fsllala&#x27;, age1: 18 &#125;</span></span><br></pre></td></tr></table></figure><ul><li>重名namespace属性合并，情况二：</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 属性或方法使用const/let定义,会报错:</span></span><br><span class="line"><span class="comment"> * 其实也不难理解：</span></span><br><span class="line"><span class="comment"> * 命名空间一样的合并,即:在一个对象里面,const/let在一个对象里面会有产生块级作用域;</span></span><br><span class="line"><span class="comment"> * const/let在同一作用域无法重新声明变量</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;  <span class="comment">// 无法重新声明块范围变量“name1”。</span></span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>;  <span class="comment">// 无法重新声明块范围变量“age1”。</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;  <span class="comment">// 无法重新声明块范围变量“name1”。</span></span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>; <span class="comment">// 无法重新声明块范围变量“age1”。</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>重名namespace属性合并，情况三：</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 属性或方法使用var定义,么的问题:</span></span><br><span class="line"><span class="comment"> * 后者会覆盖前者</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">var</span> name1 = <span class="string">&quot;fsllala&quot;</span>; </span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">var</span> age1 = <span class="number">18</span>; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">var</span> name1 = <span class="string">&quot;fsllala&quot;</span>; </span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">var</span> age1 = <span class="number">18</span>; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>); <span class="comment">// &#123; name1: &#x27;fsllala&#x27;, age1: 18 &#125;</span></span><br></pre></td></tr></table></figure><h4 id="嵌套命名空间"><a href="#嵌套命名空间" class="headerlink" title="嵌套命名空间"></a>嵌套命名空间</h4><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// namespace里面套namespace(ps:同理里面的namespace如果没有export,外面访问不到)</span></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">namespace</span> BB &#123;</span><br><span class="line">        <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">        <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>); <span class="comment">// 是个对象  &#123; BB: &#123; name1: &#x27;fsllala&#x27;, age1: 18 &#125; &#125;</span></span><br></pre></td></tr></table></figure><h4 id="抽离命名空间"><a href="#抽离命名空间" class="headerlink" title="抽离命名空间"></a>抽离命名空间</h4><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.ts里导出文件</span></span><br><span class="line"><span class="comment">// 将最外层 namespace 通过 export导出</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">namespace</span> BB &#123;</span><br><span class="line">        <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">        <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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"><span class="comment">// index2.ts里面导入文件</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="variable constant_">AA</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./index&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>);  <span class="comment">// &#123; BB: &#123; name1: &#x27;fsllala&#x27;, age1: 18 &#125; &#125;</span></span><br></pre></td></tr></table></figure><h4 id="简化命名空间"><a href="#简化命名空间" class="headerlink" title="简化命名空间"></a>简化命名空间</h4><blockquote><p>除了使用<code>const</code>还可以使用<code>import</code>来简化；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index2.ts里面导入文件</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="variable constant_">AA</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./index&quot;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="variable constant_">AA</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./index&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 感觉太长了</span></span><br><span class="line"><span class="comment">// console.log(AA.BB.name1);  // fsllala</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//method1:</span></span><br><span class="line"><span class="keyword">const</span> method1 = <span class="variable constant_">AA</span>.<span class="property">BB</span>.<span class="property">name1</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(method1);  <span class="comment">//fsllala</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//method2:</span></span><br><span class="line"><span class="keyword">import</span> method2 = <span class="variable constant_">AA</span>.<span class="property">BB</span>.<span class="property">name1</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`method2:<span class="subst">$&#123;method2&#125;</span>`</span>); <span class="comment">// method2:fsllala</span></span><br></pre></td></tr></table></figure><h2 id="in操作符"><a href="#in操作符" class="headerlink" title="in操作符"></a>in操作符</h2><blockquote><p>如果指定的属性在指定的对象或其原型链中，则 in 运算符返回true；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Fish</span> &#123;</span><br><span class="line">    <span class="title function_">swim</span>(): <span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Dog</span> &#123;</span><br><span class="line">    <span class="attr">run</span>: <span class="function">() =&gt;</span> <span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">move</span>(<span class="params">animal: Fish | Dog</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="string">&quot;swim&quot;</span> <span class="keyword">in</span> animal) &#123;</span><br><span class="line">        animal.<span class="title function_">swim</span>(); <span class="comment">// fish is swiming~~</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        animal.<span class="title function_">run</span>();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">move</span>(&#123;</span><br><span class="line">    <span class="title function_">swim</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;fish is swiming~~&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="三斜线指令"><a href="#三斜线指令" class="headerlink" title="三斜线指令"></a>三斜线指令</h2><blockquote><p>重点：我们知道在 TS 项目中，文件之间相互引用是通过<code> import</code>来实现的，那么声明文件之间的引用呢？没错通过<strong>三斜线指令</strong>。</p></blockquote><p>三斜线指令常用的就两个功能：</p><ul><li>倒入声明文件</li><li>倒入第三方包</li></ul><p>如果对比 import 的功能，我们可以写出如下的等式：</p><ul><li><code>/// &lt;reference path=&quot;...&quot; /&gt;</code> &#x3D;&#x3D; <code>import filename.xxx</code></li><li><code>/// &lt;reference types=&quot;...&quot; /&gt;</code> &#x3D;&#x3D; <code>import lodash from &quot;lodash&quot;</code></li></ul><blockquote><p>PS：下方代码使用<code>ts-node</code>输出有有问题，暂未找到解决方法；</p><p>But 通过<code>tsc --outFile sample.js index.ts</code>将<code>index.ts</code>编译成<code>sample.js</code>方法可行</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在a.ts</span></span><br><span class="line"><span class="keyword">namespace</span> A &#123;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">fn</span> = (<span class="params"></span>) =&gt; <span class="string">&#x27;a&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//在b.ts</span></span><br><span class="line"><span class="keyword">namespace</span> A &#123;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">fn2</span> = (<span class="params"></span>) =&gt; <span class="string">&#x27;b&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//在index.ts</span></span><br><span class="line"><span class="comment">///&lt;reference path=&quot;./index2.ts&quot; /&gt;</span></span><br><span class="line"><span class="comment">///&lt;reference path=&quot;./index3.ts&quot; /&gt;</span></span><br><span class="line"><span class="comment">//引入之后直接可以使用变量 A</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(A);</span><br></pre></td></tr></table></figure><h2 id="声明文件"><a href="#声明文件" class="headerlink" title="声明文件"></a>声明文件</h2><blockquote><p>这里环境为：vite+vue3+ts；</p></blockquote><ul><li>我们之前编写的typescript文件都是 .ts 文件，这些文件最终会输出 .js 文件，也是我们通常编写代码的地方；</li><li>还有另外一种文件 .d.ts 文件，它是用来做类型的声明(declare)，称之为类型声明（Type Declaration）或者类型定义（Type<br>Definition）文件。</li><li>.d.ts文件是不需要导出的；让他直接在全局就ok；</li></ul><h3 id="外部定义类型声明-–-第三方库"><a href="#外部定义类型声明-–-第三方库" class="headerlink" title="外部定义类型声明 – 第三方库"></a>外部定义类型声明 – 第三方库</h3><p>有一些第三方库是没有写自己的声明文件的，我们在引用的时候，会报错。以<code>lodash</code>库为例(lodash是有第三方写好的声明文件库的，这里我们自己写)。</p><ol><li>安装第三方库</li></ol><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i --save lodash</span><br></pre></td></tr></table></figure><ol start="2"><li>在vue文件中进入第三方库，由于没有声明文件，所以会报错。</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/smwj1688632505923.png"></p><ol start="3"><li>手写声明文件</li></ol><p>这里新建一个d.ts文件，例如 fsllala.d.ts</p><figure class="highlight typescript"><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"><span class="comment">// fsllala.d.ts</span></span><br><span class="line"><span class="comment">// 根据 import _ from &quot;lodash&quot; 得知 lodash是从模块导入的; 所以声明一个模块,即: declare module</span></span><br><span class="line"><span class="keyword">declare</span> <span class="variable language_">module</span> <span class="string">&quot;lodash&quot;</span>;</span><br></pre></td></tr></table></figure><p>然后在<code>lodash.vue</code>中发现报错消失了，即可以使用第三方库了(如果还报错，重启VS Code即可)；</p><ol start="4"><li>但是还不知道模块里面有什么东西，所以使用的时候不会有提示。可以在模块内部作用域自定义函数，解决不提示的问题。</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//  fsllala.d.ts</span></span><br><span class="line"><span class="comment">// &#123;&#125;代表模块内部作用域,里面可以导出一些function;</span></span><br><span class="line"><span class="keyword">declare</span> <span class="variable language_">module</span> <span class="string">&quot;lodash&quot;</span>&#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">max</span>(<span class="params">...args:<span class="built_in">any</span>[]</span>):<span class="built_in">any</span>;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">mean</span>(<span class="params">...args:<span class="built_in">any</span>[]</span>):<span class="built_in">any</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight tsx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// lodash.vue 输入_.有相关的api提示;</span></span><br><span class="line">&lt;script setup lang=<span class="string">&quot;ts&quot;</span>&gt;</span><br><span class="line"><span class="keyword">import</span> _ <span class="keyword">from</span> <span class="string">&quot;lodash&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(_.<span class="title function_">max</span>([<span class="number">4</span>, <span class="number">2</span>, <span class="number">8</span>, <span class="number">6</span>])); <span class="comment">// 8</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(_.<span class="title function_">mean</span>([<span class="number">4</span>, <span class="number">2</span>, <span class="number">8</span>, <span class="number">6</span>])); <span class="comment">// 5</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure><h3 id="自己代码类型声明"><a href="#自己代码类型声明" class="headerlink" title="自己代码类型声明"></a>自己代码类型声明</h3><ul><li>一般来说TS的类型是不需要单独抽离到d.ts文件中的。但是一些全局声明的变量&#x2F;函数&#x2F;类例外。</li></ul><figure class="highlight js"><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">// vue中的 index.html中</span></span><br><span class="line"><span class="comment">// 变量</span></span><br><span class="line"><span class="keyword">const</span> whyName = <span class="string">&quot;Fsllala&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> whyAge = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">const</span> whyHeight = <span class="number">188</span>;</span><br><span class="line"><span class="comment">// 函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">globalFunc</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`this is globalFunction~<span class="subst">$&#123;args&#125;</span>`</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 类</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name, age</span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/smwj21688638518386.png" alt="声明文件"></p><p>上面如果是JS，就可以直接引用了(把script标签中的 “lang&#x3D;’ts’”去掉，就可以用了)；显然是ts的问题；</p><ul><li>新建一个d.ts的声明文件</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 为自己的全局  变量/函数/类 定义类型声明</span></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> <span class="attr">whyName</span>: <span class="built_in">string</span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> <span class="attr">whyAge</span>: <span class="built_in">number</span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> <span class="attr">whyHeight</span>: <span class="built_in">number</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">function</span> <span class="title function_">globalFunc</span>(<span class="params">args: <span class="built_in">string</span></span>): <span class="built_in">string</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后在<code>lodash.vue</code>中发现报错消失了，即可以使用全局变量&#x2F;函数&#x2F;类了(如果还报错，重启VS Code即可)；</p><h2 id="Partial"><a href="#Partial" class="headerlink" title="Partial"></a>Partial<Type></h2><blockquote><p>用于构造一个Type下面的所有属性都设置为可选的类型；</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 写法: Partial&lt;Type&gt;</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">IKun</span>&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">hobby</span>:<span class="built_in">string</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">IKunOptional</span> = <span class="title class_">Partial</span>&lt;<span class="title class_">IKun</span>&gt;;</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/partial1688641139388.png" alt="Partial"></p><h2 id="Record-lt-Keys-Type-gt"><a href="#Record-lt-Keys-Type-gt" class="headerlink" title="Record&lt;Keys, Type&gt;"></a>Record&lt;Keys, Type&gt;</h2><blockquote><p>用于构造一个对象类型，它所有的key(键)都是Keys类型，它所有的value(值)都是Type类型。</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">IKun</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    hobby?: <span class="built_in">string</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> t1 = <span class="string">&quot;上海&quot;</span> | <span class="string">&quot;北京&quot;</span> | <span class="string">&quot;洛杉矶&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">IKuns</span> = <span class="title class_">Record</span>&lt;t1, <span class="title class_">IKun</span>&gt;;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> *  鼠标放到 IKuns 会显示:</span></span><br><span class="line"><span class="comment"> * type IKuns = &#123;</span></span><br><span class="line"><span class="comment">    上海: IKun;</span></span><br><span class="line"><span class="comment">    北京: IKun;</span></span><br><span class="line"><span class="comment">    洛杉矶: IKun;</span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment"> * 所以说 上海/北京/洛杉矶 一个都不能少</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 上海/北京/洛杉矶 一个都不能少</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">ikuns</span>: <span class="title class_">IKuns</span> = &#123;</span><br><span class="line">    <span class="string">&quot;上海&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;xxx&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&quot;北京&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;xxx&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&quot;洛杉矶&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;xxx&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+        <content type="html"><![CDATA[<h2 id="TypeScript是什么"><a href="#TypeScript是什么" class="headerlink" title="TypeScript是什么"></a>TypeScript是什么</h2><ul><li>TS是JS的超集，所以JS基础的类型都包含在内</li></ul><h2 id="TypeScript开发环境搭建"><a href="#TypeScript开发环境搭建" class="headerlink" title="TypeScript开发环境搭建"></a>TypeScript开发环境搭建</h2><ol><li>全局安装typescript：</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install typescript -g</span><br></pre></td></tr></table></figure><ol start="2"><li>查看typescript当前版本号：</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">tsc -v</span><br></pre></td></tr></table></figure><ol start="3"><li>将TS编译成JS( TS 不能直接在浏览器执行，需要编译器将TS转为JS)</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">tsc xxx.<span class="property">ts</span></span><br></pre></td></tr></table></figure><h2 id="基础数据类型"><a href="#基础数据类型" class="headerlink" title="基础数据类型"></a>基础数据类型</h2><ul><li>基础类型：Number、String、Boolean、null、undefined以及 ES6 的 <a href="http://es6.ruanyifeng.com/#docs/symbol">Symbol</a> 和 ES10 的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a>。</li></ul><h3 id="字符串类型"><a href="#字符串类型" class="headerlink" title="字符串类型"></a>字符串类型</h3><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">str</span>: <span class="built_in">string</span> = <span class="string">&quot;这是字符串类型&quot;</span>;</span><br><span class="line"><span class="comment">//上方我们将str这个变量定义为了string类型，如果对他输入其他类型的内容就会报错，例如：</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str1</span>: <span class="built_in">string</span> = <span class="number">666</span>;</span><br><span class="line"><span class="comment">//这个就会报错了，会提示你不能将类型&quot;number&quot;分配给类型&quot;string&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">muban</span>: <span class="built_in">string</span> = <span class="string">`web<span class="subst">$&#123;str&#125;</span>`</span>;</span><br><span class="line"><span class="comment">//我们也可以使用ES6中的模板字符串</span></span><br></pre></td></tr></table></figure><h3 id="数字类型"><a href="#数字类型" class="headerlink" title="数字类型"></a>数字类型</h3><p>支持十六进制、十进制、八进制和<a href="https://so.csdn.net/so/search?q=%E4%BA%8C%E8%BF%9B%E5%88%B6&spm=1001.2101.3001.7020">二进制</a></p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">num</span>: <span class="built_in">number</span> = <span class="number">123</span>;<span class="comment">//普通数字</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">notANumber</span>: <span class="built_in">number</span> = <span class="title class_">NaN</span>;<span class="comment">//Nan</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">infinityNumber</span>: <span class="built_in">number</span> = <span class="title class_">Infinity</span>;<span class="comment">//无穷大</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">decimal</span>: <span class="built_in">number</span> = <span class="number">6</span>;<span class="comment">//十进制</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">hex</span>: <span class="built_in">number</span> = <span class="number">0xf00d</span>;<span class="comment">//十六进制</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">binary</span>: <span class="built_in">number</span> = <span class="number">0b1010</span>;<span class="comment">//二进制</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">octal</span>: <span class="built_in">number</span> = <span class="number">0o744</span>;<span class="comment">//八进制</span></span><br></pre></td></tr></table></figure><h3 id="布尔类型"><a href="#布尔类型" class="headerlink" title="布尔类型"></a>布尔类型</h3><figure class="highlight typescript"><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"><span class="keyword">let</span> <span class="attr">b</span>:<span class="built_in">boolean</span> = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">b2</span>:<span class="built_in">boolean</span> = <span class="title class_">Boolean</span>(<span class="number">1</span>); <span class="comment">//隐式转换</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`b:<span class="subst">$&#123;b&#125;</span>,b2:<span class="subst">$&#123;b2&#125;</span>`</span>); <span class="comment">//b:false,b2:true</span></span><br></pre></td></tr></table></figure><h3 id="空值类型"><a href="#空值类型" class="headerlink" title="空值类型"></a>空值类型</h3><blockquote><p>JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 <code>void</code> 表示没有任何返回值的函数</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fnVoid</span>(<span class="params"></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;test void&quot;</span>);</span><br><span class="line">    <span class="keyword">return</span>; <span class="comment">//可以这样后面啥也不跟</span></span><br><span class="line">    <span class="comment">// 函数也可以定义为空值，如果定义了void则不能返回内容,否则就会报错，例如：</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fnVoid2</span>(<span class="params"></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">123</span>;</span><br><span class="line">    <span class="comment">//这个就会报错了，会提示你不能将类型“number”分配给类型“void”</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p><code>void</code> 类型的用法，主要是用在我们<strong>不希望</strong>调用者关心函数返回值的情况下，比如通常的<strong>异步回调函数</strong></p></blockquote><p><strong>void也可以定义undefined 和 null类型</strong></p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">u</span>: <span class="built_in">void</span> = <span class="literal">undefined</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>: <span class="built_in">void</span> = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure><p><strong>TIPS:</strong></p><p>如果你配置了tsconfig.json 开启了严格模式: 则 null 不能 赋予 void 类型 </p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;compilerOptions&quot;</span>:&#123;</span><br><span class="line">        <span class="string">&quot;strict&quot;</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/void1674789861382.png" alt="void"></p><p><strong>解决方法：</strong></p><ol><li><code>tsc --init</code>创建tsconfig文件；</li><li><code>tsconfig.json</code>文件内搜索<code>strict</code>，值改为<code>false</code>；</li></ol><h3 id="Null和undefined类型"><a href="#Null和undefined类型" class="headerlink" title="Null和undefined类型"></a>Null和undefined类型</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">u</span>: <span class="literal">undefined</span> = <span class="literal">undefined</span>;<span class="comment">//定义undefined</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>: <span class="literal">null</span> = <span class="literal">null</span>;<span class="comment">//定义null</span></span><br></pre></td></tr></table></figure><h3 id="void-和-undefined-和-null-最大的区别"><a href="#void-和-undefined-和-null-最大的区别" class="headerlink" title="void 和 undefined 和 null 最大的区别"></a>void 和 undefined 和 null 最大的区别</h3><blockquote><p>void的内容也是不能去赋值给别人的</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">u</span>: <span class="built_in">void</span> = <span class="literal">undefined</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>: <span class="literal">null</span> = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>: <span class="built_in">string</span> = <span class="string">&quot;123&quot;</span>;</span><br><span class="line">str = u;</span><br><span class="line"><span class="comment">// 这个就会报错了，会提示你不能将类型“void”分配给类型“string”</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/void21674791309884.png" alt="void"></p><blockquote><p>下面这样undefined与null可以赋值</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">u</span>: <span class="literal">undefined</span> = <span class="literal">undefined</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>: <span class="literal">null</span> = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>: <span class="built_in">string</span> = <span class="string">&quot;123&quot;</span>;</span><br><span class="line">str = u;</span><br></pre></td></tr></table></figure><h2 id="NodeJs-环境执行TS"><a href="#NodeJs-环境执行TS" class="headerlink" title="NodeJs 环境执行TS"></a>NodeJs 环境执行TS</h2><blockquote><p>上面每次执行代码，都需要将TS编译成JS，然后再通过NodeJs来执行JS，有点繁琐。</p></blockquote><p>NodeJs直接运行TS需要安装两个依赖：</p><ul><li><code>npm install @types/node -D</code>（node环境支持的依赖必装）</li><li><code>npm install ts-node -g</code></li><li>输出版本号：<code>ts-node -v</code></li><li>NodeJs执行TS：<code>ts-node xxx.ts</code></li></ul><h2 id="Any-类型-和-unknown-顶级类型"><a href="#Any-类型-和-unknown-顶级类型" class="headerlink" title="Any 类型 和 unknown 顶级类型"></a>Any 类型 和 unknown 顶级类型</h2><blockquote><p>any与unknown没有强制限定哪种类型，可以定义任何类型的值，被称为顶级类型(top type)。</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//any 可以定义任何类型的值</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">anys</span>: <span class="built_in">any</span>;</span><br><span class="line">anys = <span class="literal">true</span>;             <span class="comment">// OK</span></span><br><span class="line">anys = <span class="number">18</span>;               <span class="comment">// OK</span></span><br><span class="line">anys = <span class="string">&quot;Hello World&quot;</span>;    <span class="comment">// OK</span></span><br><span class="line">anys = [];               <span class="comment">// OK</span></span><br><span class="line">anys = &#123;&#125;;               <span class="comment">// OK</span></span><br><span class="line">anys = <span class="literal">null</span>;             <span class="comment">// OK</span></span><br><span class="line">anys = <span class="literal">undefined</span>;        <span class="comment">// OK</span></span><br><span class="line">anys = <span class="title class_">Symbol</span>(<span class="string">&quot;type&quot;</span>);   <span class="comment">// OK</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//unknown 可以定义任何类型的值</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">value</span>: <span class="built_in">unknown</span>;</span><br><span class="line"></span><br><span class="line">value = <span class="literal">true</span>;             <span class="comment">// OK</span></span><br><span class="line">value = <span class="number">18</span>;               <span class="comment">// OK</span></span><br><span class="line">value = <span class="string">&quot;Hello World&quot;</span>;    <span class="comment">// OK</span></span><br><span class="line">value = [];               <span class="comment">// OK</span></span><br><span class="line">value = &#123;&#125;;               <span class="comment">// OK</span></span><br><span class="line">value = <span class="literal">null</span>;             <span class="comment">// OK</span></span><br><span class="line">value = <span class="literal">undefined</span>;        <span class="comment">// OK</span></span><br><span class="line">value = <span class="title class_">Symbol</span>(<span class="string">&quot;type&quot;</span>);   <span class="comment">// OK</span></span><br></pre></td></tr></table></figure><h3 id="any与unknow区别"><a href="#any与unknow区别" class="headerlink" title="any与unknow区别"></a>any与unknow区别</h3><blockquote><p>TypeScript 3.0中引入的 unknown 类型也被认为是 top type ，但它更安全。与 any 一样，所有类型都可以分配给unknown</p><p>unknow类型比any更加严格当你要使用any 的时候可以尝试使用unknow</p></blockquote><ol><li>unknown可赋值对象只有unknown 和 any</li></ol><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//unknown类型不能赋值给unknown 和 any之外的其他类型</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">names</span>: <span class="built_in">unknown</span> = <span class="string">&#x27;123&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">names2</span>: <span class="built_in">string</span> = names;  <span class="comment">// 不能将类型“unknown”分配给类型“string”。</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//这样就没问题 any类型是可以的</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">ages</span>: <span class="built_in">any</span> = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">ages2</span>: <span class="built_in">string</span> = ages;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//unknown可赋值对象只有unknown 和 any</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">aaa</span>: <span class="built_in">unknown</span> = <span class="string">&#x27;123&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">bbb</span>: <span class="built_in">unknown</span> = <span class="string">&#x27;456&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">ccc</span>: <span class="built_in">any</span> = <span class="string">&quot;789&quot;</span>;</span><br><span class="line"></span><br><span class="line">aaa = bbb;</span><br><span class="line">aaa = ccc;</span><br></pre></td></tr></table></figure><ol start="2"><li>unknow 不能调用属性和方法</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//如果是any类型在对象没有这个属性的时候还在获取是不会报错的</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj</span>: <span class="built_in">any</span> = &#123; <span class="attr">b</span>: <span class="number">1</span> &#125;;</span><br><span class="line">obj.<span class="property">a</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//如果是unknow 不能调用属性和方法</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj2</span>: <span class="built_in">unknown</span> = &#123; <span class="attr">b</span>: <span class="number">1</span>, <span class="attr">ccc</span>: (): <span class="function"><span class="params">number</span> =&gt;</span> <span class="number">213</span> &#125;;</span><br><span class="line">obj2.<span class="property">b</span>;  <span class="comment">//类型“unknown”上不存在属性“b”。</span></span><br><span class="line">obj2.<span class="title function_">ccc</span>(); <span class="comment">//类型“unknown”上不存在属性“ccc”。</span></span><br></pre></td></tr></table></figure><ol start="3"><li>声明变量的时候没有指定任意类型默认为any(如果使用any 就失去了TS类型检测的作用)</li></ol><h2 id="接口和对象类型"><a href="#接口和对象类型" class="headerlink" title="接口和对象类型"></a>接口和对象类型</h2><h3 id="interface定义对象类型"><a href="#interface定义对象类型" class="headerlink" title="interface定义对象类型"></a>interface定义对象类型</h3><blockquote><p>在JS中，我们声明对象，直接写就好了</p></blockquote><figure class="highlight typescript"><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"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>在TS中，我们定义对象的方式要用关键字<strong>interface</strong>（接口），我的理解是使用<strong>interface</strong>来定义一种约束(类型)，让数据的结构满足约束的格式。定义方式如下：</p></blockquote><ul><li>有点类似于<strong>类</strong>的写法</li></ul><ol><li>使用接口约束的时候不能多一个属性也不能少一个属性，必须与接口保持一致</li></ol><figure class="highlight typescript"><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">/**</span></span><br><span class="line"><span class="comment"> *这样写是会报错的 因为我们在Person定义了name、age 但是对象里面缺少age属性</span></span><br><span class="line"><span class="comment"> *使用接口约束的时候不能多一个属性也不能少一个属性</span></span><br><span class="line"><span class="comment"> *必须与接口保持一致</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Person</span>&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//  这个就会报错了，会提示 类型 &quot;&#123; name: string; &#125;&quot; 中缺少属性 &quot;age&quot;，但类型 &quot;Person&quot; 中需要该属性。</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>:<span class="title class_">Person</span>=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;fsllala&quot;</span>  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>重名interface  可以合并</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> A &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> A &#123;</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj</span>: A = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj); <span class="comment">//&#123; name: &#x27;fsllala&#x27;, age: 18 &#125;</span></span><br></pre></td></tr></table></figure><ol start="3"><li>可选属性 使用?操作符</li></ol><figure class="highlight typescript"><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">//可选属性的含义是该属性可以不存在</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    age?: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//所以说这样写也是没问题的</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>: <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//当然这样写也没问题</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person2</span>: <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsl&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li>索引签名[propName: string]</li></ol><blockquote><p>后端给我们返回的字段不确定，类型也不确定的时候可以用任意属性；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 在这个例子当中我们看到接口中并没有定义ccc和ddd但是并没有报错</span></span><br><span class="line"><span class="comment"> * 因为我们定义了[propName: string]: any;</span></span><br><span class="line"><span class="comment"> * 允许添加新的任意属性</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    [<span class="attr">propName</span>: <span class="built_in">string</span>]: <span class="built_in">any</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>: <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsl&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">ccc</span>: <span class="number">123</span>,</span><br><span class="line">    <span class="attr">ddd</span>:<span class="string">&#x27;456&#x27;</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li>只读属性 readonly</li></ol><blockquote><p>readonly 只读属性是不允许被赋值的只能读取；(跟input的readonly属性类似)；</p><p>常用于<code>函数</code>和后台返回的数据<code>ID</code></p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="keyword">readonly</span> <span class="attr">id</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    [<span class="attr">propName</span>: <span class="built_in">string</span>]: <span class="built_in">any</span>,</span><br><span class="line">    <span class="keyword">readonly</span> <span class="attr">cb</span>: <span class="function">() =&gt;</span> <span class="built_in">boolean</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>: <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">id</span>: <span class="number">2</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsl&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">ccc</span>: <span class="number">123</span>,</span><br><span class="line">    <span class="attr">cb</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//这样写是会报错的 会提示: 无法为“id”赋值，因为它是只读属性。</span></span><br><span class="line">person.<span class="property">id</span> = <span class="number">3</span>;  </span><br></pre></td></tr></table></figure><ol start="6"><li>添加函数</li></ol><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="keyword">readonly</span> <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    [<span class="attr">propName</span>: <span class="built_in">string</span>]: <span class="built_in">any</span>,</span><br><span class="line">    <span class="title function_">cb</span>(): <span class="built_in">number</span>, <span class="comment">//定义函数和函数返回值</span></span><br><span class="line">    <span class="attr">foo</span>: <span class="function">() =&gt;</span> <span class="built_in">boolean</span>  <span class="comment">//定义函数和函数返回值</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>: <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsl&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">ccc</span>: <span class="number">123</span>,</span><br><span class="line">    <span class="attr">dd</span>: <span class="number">111</span>,</span><br><span class="line">    <span class="attr">cb</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">456</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">foo</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="7"><li>继承</li></ol><blockquote><p>和ES6中类的继承类似；</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> A &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> B <span class="keyword">extends</span> A &#123;</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj</span>: B = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="interface定义函数类型"><a href="#interface定义函数类型" class="headerlink" title="interface定义函数类型"></a>interface定义函数类型</h3><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// interface定义函数格式: (参数列表):返回值</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Fn</span> &#123;</span><br><span class="line">    <span class="comment">// 函数是个方法,所以是 ();返回一个 number类型的数组;参数是name,为string类型</span></span><br><span class="line">    (<span class="attr">name</span>: <span class="built_in">string</span>): <span class="built_in">number</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">foo</span>: <span class="title class_">Fn</span> = <span class="keyword">function</span> (<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="数组类型"><a href="#数组类型" class="headerlink" title="数组类型"></a>数组类型</h2><blockquote><p>数组类型有多种声明方法：</p></blockquote><ol><li>普通方式：类型[ ]</li></ol><figure class="highlight typescript"><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"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="built_in">number</span>[] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];  <span class="comment">//数组类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr2</span>: <span class="built_in">string</span>[] = [<span class="string">&quot;1&quot;</span>, <span class="string">&quot;2&quot;</span>, <span class="string">&quot;3&quot;</span>];  <span class="comment">//字符串类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr3</span>: <span class="built_in">boolean</span>[] = [<span class="literal">true</span>, <span class="literal">false</span>];<span class="comment">//布尔类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr4</span>: <span class="built_in">any</span>[] = [<span class="number">1</span>, <span class="string">&quot;2&quot;</span>, <span class="literal">true</span>,[],&#123;&#125;]; <span class="comment">//任意类型的数组</span></span><br></pre></td></tr></table></figure><ol start="2"><li>数组泛型 ：Array&lt;类型&gt;</li></ol><figure class="highlight typescript"><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"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="title class_">Array</span>&lt;<span class="built_in">number</span>&gt; = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];  <span class="comment">//数组类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr2</span>: <span class="title class_">Array</span>&lt;<span class="built_in">string</span>&gt; = [<span class="string">&quot;1&quot;</span>, <span class="string">&quot;2&quot;</span>, <span class="string">&quot;3&quot;</span>];  <span class="comment">//字符串类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr3</span>: <span class="title class_">Array</span>&lt;<span class="built_in">boolean</span>&gt; = [<span class="literal">true</span>, <span class="literal">false</span>];<span class="comment">//布尔类型的数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr4</span>: <span class="title class_">Array</span>&lt;<span class="built_in">any</span>&gt; = [<span class="number">1</span>, <span class="string">&quot;2&quot;</span>, <span class="literal">true</span>, [], &#123;&#125;]; <span class="comment">//任意类型的数组</span></span><br></pre></td></tr></table></figure><ol start="3"><li>用接口表示数组：一般用来描述类数组</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">NumArray</span> &#123;</span><br><span class="line">    [<span class="attr">index</span>: <span class="built_in">number</span>]: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="title class_">NumArray</span> = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="comment">//表示：只要索引的类型是数字时，那么值的类型必须是数字。</span></span><br></pre></td></tr></table></figure><h3 id="对象数组"><a href="#对象数组" class="headerlink" title="对象数组"></a>对象数组</h3><blockquote><p>使用<code>interface</code>方式来定义对象数组</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> X &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    age?: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 表示对象类型的数组</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">arr1</span>: X[] = [&#123; <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>, <span class="attr">age</span>: <span class="number">18</span> &#125;, &#123; <span class="attr">name</span>: <span class="string">&quot;fsl&quot;</span> &#125;];</span><br></pre></td></tr></table></figure><h3 id="多维数组"><a href="#多维数组" class="headerlink" title="多维数组"></a>多维数组</h3><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//普通写法</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="built_in">number</span>[][] = [[<span class="number">1</span>, <span class="number">2</span>], [<span class="number">3</span>, <span class="number">4</span>]]; <span class="comment">//二维数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr2</span>: <span class="built_in">number</span>[][][] = [[[<span class="number">1</span>]], [[<span class="number">2</span>]]];<span class="comment">//三维数组</span></span><br><span class="line"><span class="comment">//泛型写法</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr3</span>: <span class="title class_">Array</span>&lt;<span class="title class_">Array</span>&lt;<span class="built_in">number</span>&gt;&gt; = [[<span class="number">1</span>, <span class="number">2</span>], [<span class="number">3</span>, <span class="number">4</span>]]; <span class="comment">//二维数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr4</span>: <span class="title class_">Array</span>&lt;<span class="title class_">Array</span>&lt;<span class="title class_">Array</span>&lt;<span class="built_in">number</span>|<span class="built_in">string</span>&gt;&gt;&gt; = [[[<span class="number">1</span>]], [[<span class="number">2</span>,<span class="string">&quot;lala&quot;</span>]]];<span class="comment">//三维数组</span></span><br></pre></td></tr></table></figure><h3 id="arguments类数组"><a href="#arguments类数组" class="headerlink" title="arguments类数组"></a>arguments类数组</h3><blockquote><p>函数内置的arguments，是个类数组，其实就是有length属性的对象；所以没有数组的方法：push、pop…</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Arr</span>(<span class="params">...args: <span class="built_in">any</span></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>); <span class="comment">// [Arguments] &#123; &#x27;0&#x27;: 2, &#x27;1&#x27;: 3, &#x27;2&#x27;: 4 &#125;  伪(类)数组(没有数组的方法:push、pop...)</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(args); <span class="comment">// [ 2, 3, 4 ]  数组</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Arr</span>(<span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>);</span><br></pre></td></tr></table></figure><blockquote><p>所以就会导致如下情况：</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Arr</span>(<span class="params">...args: <span class="built_in">any</span></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="comment">//错误的arguments 是类数组不能这样定义</span></span><br><span class="line">    <span class="keyword">let</span> <span class="attr">arr</span>: <span class="built_in">number</span>[] = <span class="variable language_">arguments</span>; <span class="comment">// 这样写是会报错的 会提示: 类型“IArguments”缺少类型“number[]”的以下属性: pop, push, concat, join 及其他 27 项。</span></span><br><span class="line">    <span class="keyword">let</span> <span class="attr">arr2</span>: <span class="built_in">number</span>[] = args; <span class="comment">// 这个是可以的</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//ts内置对象IArguments 定义</span></span><br><span class="line">    <span class="keyword">let</span> <span class="attr">arr3</span>:<span class="title class_">IArguments</span>=<span class="variable language_">arguments</span>; <span class="comment">//类数组用IArguments</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Arr</span>(<span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>);</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"><span class="comment">//其中 IArguments 是 TypeScript 中定义好了的类型，它实际上就是：</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">IArguments</span> &#123;</span><br><span class="line">[<span class="attr">index</span>: <span class="built_in">number</span>]: <span class="built_in">any</span>;</span><br><span class="line"><span class="attr">length</span>: <span class="built_in">number</span>;</span><br><span class="line"><span class="attr">callee</span>: <span class="title class_">Function</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="函数拓展"><a href="#函数拓展" class="headerlink" title="函数拓展"></a>函数拓展</h2><ol><li>匿名函数可以进行类型推导,不推荐在写类型,因为可能会写错;</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr1 = [<span class="string">&quot;lala&quot;</span>, <span class="string">&quot;wawa&quot;</span>, <span class="string">&quot;miaomiao&quot;</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 匿名函数不建议手写写类型</span></span><br><span class="line">arr1.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(item, index);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ol start="2"><li>interface定义函数类型；</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 格式: (参数列表):返回值</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Ikun</span> &#123;</span><br><span class="line">    (<span class="attr">name</span>: <span class="built_in">string</span>): <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun</span>: <span class="title class_">Ikun</span> = (<span class="attr">aa</span>: <span class="built_in">string</span>): <span class="function"><span class="params">string</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> aa;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">kunkun</span>(<span class="string">&quot;篮球&quot;</span>);</span><br></pre></td></tr></table></figure><ol start="3"><li>函数的调用签名(从对象的角度看待这个函数,也可以有其他属性)；</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">IBar</span> &#123;</span><br><span class="line">    <span class="attr">names</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    (<span class="attr">num</span>: <span class="built_in">number</span>): <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">bar2</span>: <span class="title class_">IBar</span> = (<span class="attr">arg</span>: <span class="built_in">number</span>): <span class="function"><span class="params">number</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> arg;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">bar2.<span class="property">names</span> = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">bar2.<span class="property">age</span> = <span class="number">18</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">bar2</span>(<span class="number">222</span>))</span><br></pre></td></tr></table></figure><ol start="4"><li>type定义函数类型；</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数类型表达式 格式: (参数列表)=&gt;返回值</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Bar</span> = <span class="function">(<span class="params">num1: <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">bar</span>: <span class="title class_">Bar</span> = (<span class="attr">arg</span>: <span class="built_in">number</span>): <span class="function"><span class="params">number</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> arg;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">bar</span>(<span class="number">111</span>));  <span class="comment">// 111</span></span><br></pre></td></tr></table></figure><ol start="5"><li>参数不能多传，也不能少传 必须按照约定的类型来</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fn = <span class="keyword">function</span> (<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> name + age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//表示：实参name是string,age是number类型，函数的返回值是 string类型;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = <span class="title function_">fn</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">// fsllala18</span></span><br></pre></td></tr></table></figure><ol start="6"><li>少传参数：定义默认的参数</li></ol><ul><li>ES6默认实参</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fn = <span class="keyword">function</span> (<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span> = <span class="number">24</span></span>): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> name + age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//表示：实参name是string,age是number类型，函数的返回值是 string类型;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = <span class="title function_">fn</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">//fsllala24</span></span><br></pre></td></tr></table></figure><ul><li>可选属性 使用?操作符(不传默认为undefined)</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fn = <span class="keyword">function</span> (<span class="params">name: <span class="built_in">string</span>, age?: <span class="built_in">number</span></span>): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> name + age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//表示：实参name是string,age是number类型，函数的返回值是 string类型;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = <span class="title function_">fn</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">//fsllalaundefined</span></span><br></pre></td></tr></table></figure><ul><li>接口定义函数</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">User</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fn = <span class="keyword">function</span> (<span class="params">user: User</span>): <span class="title class_">User</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> user;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//表示：实参是定义的 接口User类型，函数的返回值是 传入的参数;</span></span><br><span class="line"><span class="keyword">let</span> result = <span class="title function_">fn</span>(&#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">// &#123; name: &#x27;fsllala&#x27;, age: 18 &#125;</span></span><br></pre></td></tr></table></figure><ul><li>函数重载</li></ul><blockquote><p>函数重载：方法名字相同，而参数不同，与返回值无关。</p><p>如果参数类型不同，则参数类型应设置为 <strong>any</strong>。</p><p>参数数量不同你可以将不同的参数设置为可选。</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">params: <span class="built_in">number</span></span>): <span class="built_in">void</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">params: <span class="built_in">string</span>, params2: <span class="built_in">number</span></span>): <span class="built_in">void</span></span><br><span class="line"> <span class="comment">// 上面定义的两个是重载函数,下面是执行函数 (遵循上面两个重载函数,执行函数是写逻辑的)</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">params: <span class="built_in">any</span>, params2?: <span class="built_in">any</span></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(params)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(params2)</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="title function_">fn</span>(<span class="number">123</span>)</span><br><span class="line"><span class="title function_">fn</span>(<span class="string">&#x27;123&#x27;</span>,<span class="number">456</span>)</span><br></pre></td></tr></table></figure><blockquote><p>Tip：JS好像是不能这样写的，JS重载是通过函数内部的arguments的长度来实现的；</p></blockquote><h2 id="类型断言-联合类型-交叉类型"><a href="#类型断言-联合类型-交叉类型" class="headerlink" title="类型断言 | 联合类型 | 交叉类型"></a>类型断言 | 联合类型 | 交叉类型</h2><h3 id="联合类型"><a href="#联合类型" class="headerlink" title="联合类型"></a>联合类型</h3><blockquote><p>可以是多种类型，中间用<code>|</code>隔开</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//例如我们的手机号通常是17XXXXXXX 为数字类型 这时候产品说需要支持座机</span></span><br><span class="line"><span class="comment">//所以我们就可以使用联合类型支持座机字符串</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">myPhone</span>: <span class="built_in">number</span> | <span class="built_in">string</span>  = <span class="string">&#x27;010-820&#x27;</span></span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="comment">//这样写是会报错的应为我们的联合类型只有数字和字符串并没有布尔值</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">myPhone2</span>: <span class="built_in">number</span> | <span class="built_in">string</span>  = <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>函数使用联合类型</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fn1 = (<span class="attr">types</span>:<span class="built_in">number</span> | <span class="built_in">boolean</span>):<span class="function"><span class="params">boolean</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> !!types</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> result =<span class="title function_">fn1</span>(<span class="number">1</span>);</span><br><span class="line"><span class="keyword">const</span> result2 = <span class="title function_">fn1</span>(<span class="literal">false</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">// true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result2); <span class="comment">// false</span></span><br></pre></td></tr></table></figure><h3 id="交叉类型"><a href="#交叉类型" class="headerlink" title="交叉类型"></a>交叉类型</h3><blockquote><p>类似于<code>extends</code></p><p>多种类型的集合，联合对象将具有所联合类型的所有成员，中间用<code>&amp;</code>隔开；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">People</span> &#123;</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">height</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Man</span> &#123;</span><br><span class="line">    <span class="attr">sex</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">fsllala</span> = (<span class="params">man: People &amp; Man</span>) =&gt; &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(man.<span class="property">age</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(man.<span class="property">height</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(man.<span class="property">sex</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fsllala</span>(&#123;</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">height</span>: <span class="number">173</span>,</span><br><span class="line">    <span class="attr">sex</span>: <span class="string">&#x27;male&#x27;</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h3 id="类型断言"><a href="#类型断言" class="headerlink" title="类型断言"></a>类型断言</h3><blockquote><p>在使用<code>联合类型</code>的时候，可能会遇到某个属性A类型没有，B类型有，比如<code>length</code>属性<code>number没有</code>，<code>string有</code>；</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fn1 = <span class="keyword">function</span>(<span class="params">params:<span class="built_in">number</span>|<span class="built_in">string</span></span>):<span class="built_in">void</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(params.<span class="property">length</span>);  <span class="comment">//  类型“number”上不存在属性“length”</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">fn1</span>(<span class="string">&quot;123456&quot;</span>);</span><br></pre></td></tr></table></figure><blockquote><p>这个时候就得用到<code>类型断言</code>：需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误：</p></blockquote><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">值 <span class="keyword">as</span> 类型　　或　　&lt;类型&gt;值  value <span class="keyword">as</span> <span class="built_in">string</span>  &lt;<span class="built_in">string</span>&gt;value</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fn1 = <span class="keyword">function</span> (<span class="params">params: <span class="built_in">number</span> | <span class="built_in">string</span></span>): <span class="built_in">void</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>((params <span class="keyword">as</span> <span class="built_in">string</span>).<span class="property">length</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">fn1</span>(<span class="string">&quot;123456&quot;</span>); <span class="comment">//6</span></span><br><span class="line"><span class="title function_">fn1</span>(<span class="number">123456</span>); <span class="comment">//undefined</span></span><br></pre></td></tr></table></figure><h3 id="使用any临时断言"><a href="#使用any临时断言" class="headerlink" title="使用any临时断言"></a>使用any临时断言</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">abc</span> = <span class="number">123</span></span><br><span class="line"><span class="comment">//这样写会报错因为window没有abc这个东西</span></span><br></pre></td></tr></table></figure><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">(<span class="variable language_">window</span> <span class="keyword">as</span> <span class="built_in">any</span>).<span class="property">abc</span> = <span class="number">123</span></span><br><span class="line"><span class="comment">//可以使用any临时断言在 any 类型的变量上，访问任何属性都是允许的。</span></span><br></pre></td></tr></table></figure><h2 id="内置对象"><a href="#内置对象" class="headerlink" title="内置对象"></a>内置对象</h2><blockquote><p>JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。</p></blockquote><h3 id="ECMAScript-的内置对象"><a href="#ECMAScript-的内置对象" class="headerlink" title="ECMAScript 的内置对象"></a>ECMAScript 的内置对象</h3><p>Boolean、Number、string、RegExp、Date、Error</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">b</span>: <span class="title class_">Boolean</span> = <span class="keyword">new</span> <span class="title class_">Boolean</span>(<span class="number">1</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>: <span class="title class_">Number</span> = <span class="keyword">new</span> <span class="title class_">Number</span>(<span class="literal">true</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">s</span>: <span class="title class_">String</span> = <span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&#x27;lala~&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(s)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">d</span>: <span class="title class_">Date</span> = <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(d)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">r</span>: <span class="title class_">RegExp</span> = <span class="regexp">/^1/</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(r)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">e</span>: <span class="title class_">Error</span> = <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&quot;error!&quot;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(e)</span><br></pre></td></tr></table></figure><h3 id="DOM-和-BOM-的内置对象"><a href="#DOM-和-BOM-的内置对象" class="headerlink" title="DOM 和 BOM 的内置对象"></a>DOM 和 BOM 的内置对象</h3><p><strong><code>Document</code>、<code>HTMLElement</code>、<code>Event</code>、<code>NodeList</code> 等</strong></p><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">body</span>: <span class="title class_">HTMLElement</span> = <span class="variable language_">document</span>.<span class="property">body</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">allDiv</span>: <span class="title class_">NodeList</span> = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line"><span class="comment">//读取div 这种需要类型断言 或者加个判断应为读不到返回null</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">div</span>:<span class="title class_">HTMLElement</span> = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>) <span class="keyword">as</span> <span class="title class_">HTMLDivElement</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params">e: MouseEvent</span>) &#123;</span><br><span class="line">    </span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//dom元素的映射表</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">HTMLElementTagNameMap</span> &#123;</span><br><span class="line">    <span class="string">&quot;a&quot;</span>: <span class="title class_">HTMLAnchorElement</span>;</span><br><span class="line">    <span class="string">&quot;abbr&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;address&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;applet&quot;</span>: <span class="title class_">HTMLAppletElement</span>;</span><br><span class="line">    <span class="string">&quot;area&quot;</span>: <span class="title class_">HTMLAreaElement</span>;</span><br><span class="line">    <span class="string">&quot;article&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;aside&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;audio&quot;</span>: <span class="title class_">HTMLAudioElement</span>;</span><br><span class="line">    <span class="string">&quot;b&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;base&quot;</span>: <span class="title class_">HTMLBaseElement</span>;</span><br><span class="line">    <span class="string">&quot;bdi&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;bdo&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;blockquote&quot;</span>: <span class="title class_">HTMLQuoteElement</span>;</span><br><span class="line">    <span class="string">&quot;body&quot;</span>: <span class="title class_">HTMLBodyElement</span>;</span><br><span class="line">    <span class="string">&quot;br&quot;</span>: <span class="title class_">HTMLBRElement</span>;</span><br><span class="line">    <span class="string">&quot;button&quot;</span>: <span class="title class_">HTMLButtonElement</span>;</span><br><span class="line">    <span class="string">&quot;canvas&quot;</span>: <span class="title class_">HTMLCanvasElement</span>;</span><br><span class="line">    <span class="string">&quot;caption&quot;</span>: <span class="title class_">HTMLTableCaptionElement</span>;</span><br><span class="line">    <span class="string">&quot;cite&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;code&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;col&quot;</span>: <span class="title class_">HTMLTableColElement</span>;</span><br><span class="line">    <span class="string">&quot;colgroup&quot;</span>: <span class="title class_">HTMLTableColElement</span>;</span><br><span class="line">    <span class="string">&quot;data&quot;</span>: <span class="title class_">HTMLDataElement</span>;</span><br><span class="line">    <span class="string">&quot;datalist&quot;</span>: <span class="title class_">HTMLDataListElement</span>;</span><br><span class="line">    <span class="string">&quot;dd&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;del&quot;</span>: <span class="title class_">HTMLModElement</span>;</span><br><span class="line">    <span class="string">&quot;details&quot;</span>: <span class="title class_">HTMLDetailsElement</span>;</span><br><span class="line">    <span class="string">&quot;dfn&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;dialog&quot;</span>: <span class="title class_">HTMLDialogElement</span>;</span><br><span class="line">    <span class="string">&quot;dir&quot;</span>: <span class="title class_">HTMLDirectoryElement</span>;</span><br><span class="line">    <span class="string">&quot;div&quot;</span>: <span class="title class_">HTMLDivElement</span>;</span><br><span class="line">    <span class="string">&quot;dl&quot;</span>: <span class="title class_">HTMLDListElement</span>;</span><br><span class="line">    <span class="string">&quot;dt&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;em&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;embed&quot;</span>: <span class="title class_">HTMLEmbedElement</span>;</span><br><span class="line">    <span class="string">&quot;fieldset&quot;</span>: <span class="title class_">HTMLFieldSetElement</span>;</span><br><span class="line">    <span class="string">&quot;figcaption&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;figure&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;font&quot;</span>: <span class="title class_">HTMLFontElement</span>;</span><br><span class="line">    <span class="string">&quot;footer&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;form&quot;</span>: <span class="title class_">HTMLFormElement</span>;</span><br><span class="line">    <span class="string">&quot;frame&quot;</span>: <span class="title class_">HTMLFrameElement</span>;</span><br><span class="line">    <span class="string">&quot;frameset&quot;</span>: <span class="title class_">HTMLFrameSetElement</span>;</span><br><span class="line">    <span class="string">&quot;h1&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h2&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h3&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h4&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h5&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h6&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;head&quot;</span>: <span class="title class_">HTMLHeadElement</span>;</span><br><span class="line">    <span class="string">&quot;header&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;hgroup&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;hr&quot;</span>: <span class="title class_">HTMLHRElement</span>;</span><br><span class="line">    <span class="string">&quot;html&quot;</span>: <span class="title class_">HTMLHtmlElement</span>;</span><br><span class="line">    <span class="string">&quot;i&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;iframe&quot;</span>: <span class="title class_">HTMLIFrameElement</span>;</span><br><span class="line">    <span class="string">&quot;img&quot;</span>: <span class="title class_">HTMLImageElement</span>;</span><br><span class="line">    <span class="string">&quot;input&quot;</span>: <span class="title class_">HTMLInputElement</span>;</span><br><span class="line">    <span class="string">&quot;ins&quot;</span>: <span class="title class_">HTMLModElement</span>;</span><br><span class="line">    <span class="string">&quot;kbd&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;label&quot;</span>: <span class="title class_">HTMLLabelElement</span>;</span><br><span class="line">    <span class="string">&quot;legend&quot;</span>: <span class="title class_">HTMLLegendElement</span>;</span><br><span class="line">    <span class="string">&quot;li&quot;</span>: <span class="title class_">HTMLLIElement</span>;</span><br><span class="line">    <span class="string">&quot;link&quot;</span>: <span class="title class_">HTMLLinkElement</span>;</span><br><span class="line">    <span class="string">&quot;main&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;map&quot;</span>: <span class="title class_">HTMLMapElement</span>;</span><br><span class="line">    <span class="string">&quot;mark&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;marquee&quot;</span>: <span class="title class_">HTMLMarqueeElement</span>;</span><br><span class="line">    <span class="string">&quot;menu&quot;</span>: <span class="title class_">HTMLMenuElement</span>;</span><br><span class="line">    <span class="string">&quot;meta&quot;</span>: <span class="title class_">HTMLMetaElement</span>;</span><br><span class="line">    <span class="string">&quot;meter&quot;</span>: <span class="title class_">HTMLMeterElement</span>;</span><br><span class="line">    <span class="string">&quot;nav&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;noscript&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;object&quot;</span>: <span class="title class_">HTMLObjectElement</span>;</span><br><span class="line">    <span class="string">&quot;ol&quot;</span>: <span class="title class_">HTMLOListElement</span>;</span><br><span class="line">    <span class="string">&quot;optgroup&quot;</span>: <span class="title class_">HTMLOptGroupElement</span>;</span><br><span class="line">    <span class="string">&quot;option&quot;</span>: <span class="title class_">HTMLOptionElement</span>;</span><br><span class="line">    <span class="string">&quot;output&quot;</span>: <span class="title class_">HTMLOutputElement</span>;</span><br><span class="line">    <span class="string">&quot;p&quot;</span>: <span class="title class_">HTMLParagraphElement</span>;</span><br><span class="line">    <span class="string">&quot;param&quot;</span>: <span class="title class_">HTMLParamElement</span>;</span><br><span class="line">    <span class="string">&quot;picture&quot;</span>: <span class="title class_">HTMLPictureElement</span>;</span><br><span class="line">    <span class="string">&quot;pre&quot;</span>: <span class="title class_">HTMLPreElement</span>;</span><br><span class="line">    <span class="string">&quot;progress&quot;</span>: <span class="title class_">HTMLProgressElement</span>;</span><br><span class="line">    <span class="string">&quot;q&quot;</span>: <span class="title class_">HTMLQuoteElement</span>;</span><br><span class="line">    <span class="string">&quot;rp&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;rt&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;ruby&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;s&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;samp&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;script&quot;</span>: <span class="title class_">HTMLScriptElement</span>;</span><br><span class="line">    <span class="string">&quot;section&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;select&quot;</span>: <span class="title class_">HTMLSelectElement</span>;</span><br><span class="line">    <span class="string">&quot;slot&quot;</span>: <span class="title class_">HTMLSlotElement</span>;</span><br><span class="line">    <span class="string">&quot;small&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;source&quot;</span>: <span class="title class_">HTMLSourceElement</span>;</span><br><span class="line">    <span class="string">&quot;span&quot;</span>: <span class="title class_">HTMLSpanElement</span>;</span><br><span class="line">    <span class="string">&quot;strong&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;style&quot;</span>: <span class="title class_">HTMLStyleElement</span>;</span><br><span class="line">    <span class="string">&quot;sub&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;summary&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;sup&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;table&quot;</span>: <span class="title class_">HTMLTableElement</span>;</span><br><span class="line">    <span class="string">&quot;tbody&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;td&quot;</span>: <span class="title class_">HTMLTableDataCellElement</span>;</span><br><span class="line">    <span class="string">&quot;template&quot;</span>: <span class="title class_">HTMLTemplateElement</span>;</span><br><span class="line">    <span class="string">&quot;textarea&quot;</span>: <span class="title class_">HTMLTextAreaElement</span>;</span><br><span class="line">    <span class="string">&quot;tfoot&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;th&quot;</span>: <span class="title class_">HTMLTableHeaderCellElement</span>;</span><br><span class="line">    <span class="string">&quot;thead&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;time&quot;</span>: <span class="title class_">HTMLTimeElement</span>;</span><br><span class="line">    <span class="string">&quot;title&quot;</span>: <span class="title class_">HTMLTitleElement</span>;</span><br><span class="line">    <span class="string">&quot;tr&quot;</span>: <span class="title class_">HTMLTableRowElement</span>;</span><br><span class="line">    <span class="string">&quot;track&quot;</span>: <span class="title class_">HTMLTrackElement</span>;</span><br><span class="line">    <span class="string">&quot;u&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;ul&quot;</span>: <span class="title class_">HTMLUListElement</span>;</span><br><span class="line">    <span class="string">&quot;var&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;video&quot;</span>: <span class="title class_">HTMLVideoElement</span>;</span><br><span class="line">    <span class="string">&quot;wbr&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="定义Promise"><a href="#定义Promise" class="headerlink" title="定义Promise"></a>定义Promise</h3><p>如果我们不指定返回的类型TS是推断不出来返回的是什么类型</p><p><img src="https://img.fsllala.top/promise1675065334340.png" alt="promise"></p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">promise</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(<span class="number">1</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>指定返回的类型</p><p><img src="https://img.fsllala.top/promise21675065518550.png" alt="promise"></p> <figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">promise</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>&lt;<span class="built_in">number</span>&gt;(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(<span class="number">1</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p> 函数定义返回promise 语法规则：<code>Promise&lt;T&gt;</code></p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">promise</span>(<span class="params"></span>): <span class="title class_">Promise</span>&lt;<span class="built_in">number</span>&gt; &#123;  <span class="comment">//  这里定义了 Promise&lt;number&gt; </span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>&lt;<span class="built_in">number</span>&gt;(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(<span class="number">1</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">promise</span>().<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(res);  <span class="comment">// 1</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="Class类"><a href="#Class类" class="headerlink" title="Class类"></a>Class类</h2><blockquote><p>ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。详见：<a href="https://fsllala.eu.org/articles/28239a8d.html">面向对象</a></p></blockquote><h3 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h3><p>在TypeScript是不允许直接在constructor 定义变量的</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/class1675069121527.png" alt="class"></p><p> 需要在constructor上面先声明</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">name11</span>:<span class="built_in">string</span></span><br><span class="line">    <span class="attr">age11</span>:<span class="built_in">number</span></span><br><span class="line">    <span class="attr">sub11</span>:<span class="built_in">boolean</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure><h3 id="类的修饰符"><a href="#类的修饰符" class="headerlink" title="类的修饰符"></a>类的修饰符</h3><blockquote><p> 总共有三个：public private protected</p></blockquote><ul><li>public(class默认)：class定义的属性或方法内部外部都能访问</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="keyword">public</span> <span class="attr">name11</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="attr">age11</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="attr">sub11</span>: <span class="built_in">boolean</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name11</span>);  <span class="comment">// fsllala</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">age11</span>); <span class="comment">// 18</span></span><br></pre></td></tr></table></figure><ul><li>private：只能在内部访问</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="keyword">public</span> <span class="attr">name11</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="keyword">private</span> <span class="attr">age11</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="attr">sub11</span>: <span class="built_in">boolean</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name11</span>);  <span class="comment">// fsllala</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">age11</span>); <span class="comment">// 这里会报错，提示: 属性“age11”为私有属性，只能在类“Person”中访问</span></span><br></pre></td></tr></table></figure><ul><li>protected：只能在内部和继承的子类中访问 不能在外部访问</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="keyword">public</span> <span class="attr">name11</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="keyword">private</span> <span class="attr">age11</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="keyword">protected</span> <span class="attr">sub11</span>: <span class="built_in">boolean</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Man</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Person</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">super</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="literal">false</span>);</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name11</span>);</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">age11</span>);  <span class="comment">// 这里会报错，提示: 属性“age11”为私有属性，只能在类“Person”中访问</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">sub11</span>); <span class="comment">// 这里没问题,因为是继承的子类</span></span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="static-静态属性-和-静态方法"><a href="#static-静态属性-和-静态方法" class="headerlink" title="static 静态属性 和 静态方法"></a>static 静态属性 和 静态方法</h3><blockquote><p>静态方法中的this指向类本身，非静态方法的this指向实例对象；</p><p>即：静态方法中的this，只能调用<code>static</code>定义的属性或方法；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="keyword">public</span> <span class="attr">name11</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="keyword">private</span> <span class="attr">age11</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="keyword">protected</span> <span class="attr">sub11</span>: <span class="built_in">boolean</span></span><br><span class="line">    <span class="keyword">static</span> <span class="attr">aaa</span>:<span class="built_in">string</span>=<span class="string">&quot;静态属性直接赋值&quot;</span>;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sub: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="comment">//这里为了更好的区分,采用的不同的属性名;</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name11</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age11</span> = age;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sub11</span> = sub;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">static</span> <span class="title function_">run</span>():<span class="built_in">string</span>&#123;</span><br><span class="line">        <span class="comment">// this.name11;  //这里会报错，提示:  类型“typeof Person”上不存在属性“name11”。</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">aaa</span>; <span class="comment">//这里没问题,静态方法中的this指向对象本身</span></span><br><span class="line">        <span class="keyword">return</span> <span class="string">&quot;静态方法中的this指向对象本身&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span>.<span class="property">aaa</span>);<span class="comment">// 静态属性直接赋值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span>.<span class="title function_">run</span>());<span class="comment">// 静态方法中的this指向对象本身</span></span><br></pre></td></tr></table></figure><h3 id="interface-定义类"><a href="#interface-定义类" class="headerlink" title="interface 定义类"></a>interface 定义类</h3><blockquote><p>TS interface 定义类，使用关键字 implements ；后面跟interface的名字，多个用逗号隔开；继承还是用extends；</p><p>与C#或Java里接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种契约。</p><p>extends可以接口继承接口，可以类继承类；implements是类实现接口；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">PersonClass</span> &#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="attr">type</span>: <span class="built_in">boolean</span>): <span class="built_in">boolean</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">PersonClass2</span> &#123;</span><br><span class="line">    <span class="title function_">set</span>(): <span class="built_in">void</span>,</span><br><span class="line">    <span class="attr">asd</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">A</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = <span class="string">&quot;123&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> <span class="keyword">extends</span> <span class="title class_ inherited__">A</span> <span class="keyword">implements</span> <span class="title class_">PersonClass</span>, <span class="title class_">PersonClass2</span> &#123;</span><br><span class="line">    <span class="attr">asd</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">super</span>()</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">asd</span> = <span class="string">&#x27;123&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params"><span class="keyword">type</span>: <span class="built_in">boolean</span></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">type</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">set</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="抽象类"><a href="#抽象类" class="headerlink" title="抽象类"></a>抽象类</h3><blockquote><p>应用场景：如果你写的类实例化之后毫无用处此时我可以把他定义为抽象类</p><p>或者你也可以把他作为一个基类-&gt; 通过继承一个派生类去实现基类的一些方法</p></blockquote><ul><li>下面这段代码会报错，因为抽象类无法被实例化</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">abstract</span> <span class="keyword">class</span> <span class="title class_">A</span> &#123;</span><br><span class="line">   <span class="keyword">public</span> <span class="attr">name</span>:<span class="built_in">string</span></span><br><span class="line">   </span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">new</span> <span class="title function_">A</span>()</span><br></pre></td></tr></table></figure><ul><li>我们在A类定义了 getName 抽象方法但未实现；</li><li>我们B类实现了A定义的抽象方法 如果实现就不报错 <strong>我们定义的抽象方法必须在派生类实现</strong></li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">abstract</span> <span class="keyword">class</span> <span class="title class_">A</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//没有 abstract 的可以直接定义方法</span></span><br><span class="line">    <span class="title function_">setName</span>(<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 方法“getName”不能具有实现，因为它标记为抽象。</span></span><br><span class="line">    <span class="keyword">abstract</span> <span class="title function_">getName</span>(): <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">B</span> <span class="keyword">extends</span> <span class="title class_ inherited__">A</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">super</span>(<span class="string">&#x27;lala&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">getName</span>(): <span class="built_in">string</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">name</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = <span class="keyword">new</span> <span class="title function_">B</span>();</span><br><span class="line">b.<span class="title function_">setName</span>(<span class="string">&quot;haha~&quot;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b.<span class="title function_">getName</span>()); <span class="comment">// haha~</span></span><br></pre></td></tr></table></figure><h2 id="元组类型"><a href="#元组类型" class="headerlink" title="元组类型"></a>元组类型</h2><ul><li>元组就是数组的变种；</li><li>如果需要一个固定大小的不同类型值的集合，我们需要使用元组；</li><li>元组（Tuple）是固定数量的不同类型的元素的组合。</li><li>元组与集合的不同之处在于，元组中的元素类型可以是不同的，而且数量固定。元组的好处在于可以把多个元素作为一个单元传递。如果一个方法需要返回多个值，可以把这多个值作为元组返回，而不需要创建额外的类来表示。</li></ul><figure class="highlight typescript"><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"><span class="keyword">let</span> <span class="attr">arr</span>: [<span class="built_in">number</span>, <span class="built_in">string</span>] = [<span class="number">1</span>, <span class="string">&#x27;string&#x27;</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr2</span>: <span class="keyword">readonly</span> [<span class="built_in">number</span>, <span class="built_in">boolean</span>, <span class="built_in">string</span>, <span class="literal">undefined</span>] = [<span class="number">1</span>, <span class="literal">true</span>, <span class="string">&#x27;sring&#x27;</span>, <span class="literal">undefined</span>] </span><br></pre></td></tr></table></figure><p>当赋值或访问一个已知索引的元素时，会得到正确的类型：</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>:[<span class="built_in">number</span>,<span class="built_in">string</span>] = [<span class="number">1</span>,<span class="string">&#x27;string&#x27;</span>]</span><br><span class="line">arr[<span class="number">0</span>].<span class="property">length</span> <span class="comment">// 这里会报错,提示：类型“number”上不存在属性“length”</span></span><br><span class="line">arr[<span class="number">1</span>].<span class="property">length</span> <span class="comment">// 这里 么的问题</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">//数字是没有length 的</span></span><br></pre></td></tr></table></figure><p>越界元素</p><figure class="highlight typescript"><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"><span class="comment">// 对于越界的元素他的类型被限制为 联合类型（就是你在元组中定义的类型）==&gt;  string | number[]</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>:[<span class="built_in">number</span>,<span class="built_in">string</span>] = [<span class="number">1</span>,<span class="string">&#x27;string&#x27;</span>];</span><br><span class="line">arr.<span class="title function_">push</span>(<span class="built_in">boolean</span>); <span class="comment">// 这里会报错,提示： “boolean”仅表示类型，但在此处却作为值使用。</span></span><br><span class="line">arr.<span class="title function_">push</span>(<span class="number">1</span>);<span class="comment">// 这里 么的问题</span></span><br></pre></td></tr></table></figure><p>应用场景 例如定义excel返回的数据</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">excel</span>: [<span class="built_in">string</span>, <span class="built_in">string</span>, <span class="built_in">number</span>, <span class="built_in">string</span>][] = [</span><br><span class="line">    [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;name&#x27;</span>, <span class="number">1</span>, <span class="string">&#x27;123&#x27;</span>],</span><br><span class="line">    [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;name&#x27;</span>, <span class="number">1</span>, <span class="string">&#x27;123&#x27;</span>],</span><br><span class="line">    [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;name&#x27;</span>, <span class="number">1</span>, <span class="string">&#x27;123&#x27;</span>],</span><br><span class="line">    [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;name&#x27;</span>, <span class="number">1</span>, <span class="string">&#x27;123&#x27;</span>],</span><br><span class="line">    [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;name&#x27;</span>, <span class="number">1</span>, <span class="string">&#x27;123&#x27;</span>],</span><br><span class="line">];</span><br></pre></td></tr></table></figure><h2 id="枚举类型"><a href="#枚举类型" class="headerlink" title="枚举类型"></a>枚举类型</h2><ul><li>在JavaScript中是没有枚举的概念的TS帮我们定义了枚举这个类型；</li><li>使用枚举：通过enum关键字定义我们的枚举；</li><li>作用：定义常量，约束统一；</li></ul><h3 id="数字枚举"><a href="#数字枚举" class="headerlink" title="数字枚举"></a>数字枚举</h3><p>例如 红绿蓝 Red &#x3D; 0 Green &#x3D; 1 Blue&#x3D; 2 分别代表红色0 绿色为1 蓝色为2</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Red</span>,</span><br><span class="line">    <span class="title class_">Green</span>,</span><br><span class="line">    <span class="title class_">Blue</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Red</span>); <span class="comment">//0</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Green</span>); <span class="comment">//1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Blue</span>); <span class="comment">//2</span></span><br></pre></td></tr></table></figure><p>这样写就可以实现应为ts定义的枚举中的每一个组员默认都是从0开始的所以也就是</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Red</span> = <span class="number">0</span>,</span><br><span class="line">    <span class="title class_">Green</span> = <span class="number">1</span>,</span><br><span class="line">    <span class="title class_">Blue</span> = <span class="number">2</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Red</span>); <span class="comment">//0</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Green</span>); <span class="comment">//1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Blue</span>); <span class="comment">//2</span></span><br><span class="line"><span class="comment">//默认就是从0开始的 可以不写值</span></span><br></pre></td></tr></table></figure><p>增长枚举</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Red</span> = <span class="number">5</span>,</span><br><span class="line">    <span class="title class_">Green</span>,</span><br><span class="line">    <span class="title class_">Blue</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Red</span>); <span class="comment">//5</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Green</span>); <span class="comment">//6</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Blue</span>); <span class="comment">//7</span></span><br></pre></td></tr></table></figure><p>自定义枚举</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Red</span> = <span class="number">5</span>,</span><br><span class="line">    <span class="title class_">Green</span> = <span class="number">13</span>,</span><br><span class="line">    <span class="title class_">Blue</span> = <span class="number">18</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Red</span>); <span class="comment">//5</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Green</span>); <span class="comment">//13</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Blue</span>); <span class="comment">//18</span></span><br></pre></td></tr></table></figure><h3 id="字符串枚举"><a href="#字符串枚举" class="headerlink" title="字符串枚举"></a>字符串枚举</h3><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span>&#123;</span><br><span class="line">    <span class="title class_">Red</span> = <span class="string">&#x27;red&#x27;</span>,</span><br><span class="line">    <span class="title class_">Green</span> = <span class="string">&#x27;green&#x27;</span>,</span><br><span class="line">    <span class="title class_">Blue</span> = <span class="string">&#x27;blue&#x27;</span></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Red</span>); <span class="comment">//red</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Green</span>); <span class="comment">//green</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Color</span>.<span class="property">Blue</span>); <span class="comment">//blue</span></span><br></pre></td></tr></table></figure><h3 id="异构枚举"><a href="#异构枚举" class="headerlink" title="异构枚举"></a>异构枚举</h3><p>枚举可以混合字符串和数字成员</p><figure class="highlight typescript"><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"><span class="keyword">enum</span> <span class="title class_">Color</span>&#123;</span><br><span class="line">    <span class="title class_">No</span> = <span class="string">&quot;No&quot;</span>,</span><br><span class="line">    <span class="title class_">Yes</span> = <span class="number">1</span>,</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure><h3 id="接口枚举"><a href="#接口枚举" class="headerlink" title="接口枚举"></a>接口枚举</h3><p>定义一个枚举Color 定义一个接口AA 他有一个属性red 值为Color.Yes</p><p>声明对象的时候要遵循这个规则</p><figure class="highlight typescript"><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="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">No</span> = <span class="string">&quot;No&quot;</span>,</span><br><span class="line">    <span class="title class_">Yes</span> = <span class="number">1</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> AA &#123;</span><br><span class="line">    <span class="attr">red</span>: <span class="title class_">Color</span>.<span class="property">Yes</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj1</span>: <span class="variable constant_">AA</span> = &#123;</span><br><span class="line">    <span class="comment">// 下面两种写法都可以</span></span><br><span class="line">    <span class="comment">// red: Color.Yes</span></span><br><span class="line">    <span class="attr">red</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="const枚举"><a href="#const枚举" class="headerlink" title="const枚举"></a>const枚举</h3><blockquote><p>大多数情况下，枚举是十分有效的方案。 然而在某些情况下需求很严格。 为了避免在额外生成的代码上的开销和额外的非直接的对枚举成员的访问，我们可以使用 <code>const</code>枚举。 常量枚举通过在枚举上使用 <code>const</code>修饰符来定义</p></blockquote><ul><li>let 和 var 都是不允许声明enum的，只能使用const声明</li><li>const 声明的枚举会被编译成常量</li><li>普通声明的枚举编译完后是个对象</li></ul><ol><li>普通声明编译之后</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Yes</span>,</span><br><span class="line">    <span class="title class_">No</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">code</span>: <span class="built_in">number</span> = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">if</span> (code === <span class="title class_">Color</span>.<span class="property">No</span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>JS:</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="title class_">Color</span>;</span><br><span class="line">(<span class="keyword">function</span> (<span class="params">Color</span>) &#123;</span><br><span class="line">    <span class="title class_">Color</span>[<span class="title class_">Color</span>[<span class="string">&quot;Yes&quot;</span>] = <span class="number">0</span>] = <span class="string">&quot;Yes&quot;</span>;</span><br><span class="line">    <span class="title class_">Color</span>[<span class="title class_">Color</span>[<span class="string">&quot;No&quot;</span>] = <span class="number">1</span>] = <span class="string">&quot;No&quot;</span>;</span><br><span class="line">&#125;)(<span class="title class_">Color</span> || (<span class="title class_">Color</span> = &#123;&#125;));</span><br><span class="line"><span class="keyword">var</span> code = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">if</span> (code === <span class="title class_">Color</span>.<span class="property">No</span>) &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>const声明编译之后</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="keyword">enum</span> <span class="title class_">Color</span> &#123;</span><br><span class="line">    <span class="title class_">Yes</span>,</span><br><span class="line">    <span class="title class_">No</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">code</span>: <span class="built_in">number</span> = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">if</span> (code === <span class="title class_">Color</span>.<span class="property">No</span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>JS:</p><figure class="highlight js"><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"><span class="keyword">var</span> code = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">if</span> (code === <span class="number">1</span> <span class="comment">/* Color.No */</span>) &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="反向映射"><a href="#反向映射" class="headerlink" title="反向映射"></a>反向映射</h3><ul><li>它包含了正向映射（ <code>name</code> -&gt; <code>value</code>）和反向映射（ <code>value</code> -&gt; <code>name</code>）</li><li>要注意的是 <em>不会</em>为字符串枚举成员生成反向映射。</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> <span class="title class_">Enum</span> &#123;</span><br><span class="line">    success</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">result</span>: <span class="built_in">number</span> = <span class="title class_">Enum</span>.<span class="property">success</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">//0</span></span><br><span class="line"><span class="keyword">let</span> result2 = <span class="title class_">Enum</span>[result];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result2); <span class="comment">//success</span></span><br></pre></td></tr></table></figure><h2 id="类型推论-类型别名"><a href="#类型推论-类型别名" class="headerlink" title="类型推论|类型别名"></a>类型推论|类型别名</h2><h3 id="类型推论"><a href="#类型推论" class="headerlink" title="类型推论"></a>类型推论</h3><blockquote><p>我声明了一个变量但是没有定义类型</p><p>TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论</p></blockquote><p><img src="https://img.fsllala.top/lxtl1675250862922.png" alt="类型推论"></p><figure class="highlight typescript"><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"><span class="keyword">let</span> str = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="comment">// 会报错，虽然我们没用明确限制类型，但是TS编辑器会自动推论为string类型。就不能够在赋值给别的类型</span></span><br><span class="line">str = <span class="number">18</span>;  <span class="comment">//这里会报错,提示: 不能将类型“number”分配给类型“string”。 </span></span><br></pre></td></tr></table></figure><p>如果你声明变量没有定义类型也没有赋值这时候 TS 会推断成 any 类型可以进行任何操作</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str<span class="comment">//为any类型</span></span><br><span class="line">str = <span class="number">123</span></span><br><span class="line">str = <span class="string">&quot;马杀鸡&quot;</span></span><br><span class="line">str = <span class="literal">false</span></span><br><span class="line">str = []</span><br></pre></td></tr></table></figure><h3 id="类型别名"><a href="#类型别名" class="headerlink" title="类型别名"></a>类型别名</h3><blockquote><p>type 关键字（可以给一个类型定义一个名字）多用于复合类型</p></blockquote><ul><li>定义类型别名</li></ul><figure class="highlight typescript"><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"><span class="keyword">type</span> s = <span class="built_in">string</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>: s = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str); <span class="comment">// fsllala</span></span><br></pre></td></tr></table></figure><ul><li>联合类型：指定多种类型，在前文有提到；</li></ul><figure class="highlight typescript"><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"><span class="keyword">type</span> s = <span class="built_in">string</span>|<span class="built_in">number</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>:s = <span class="string">&quot;永恒的紫罗兰花园&quot;</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">num</span>:s = <span class="number">520</span><span class="comment">//这有这两种类型可以</span></span><br></pre></td></tr></table></figure><ul><li>定义函数别名</li></ul><figure class="highlight typescript"><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"><span class="keyword">type</span> s = <span class="function">() =&gt;</span> <span class="built_in">string</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>: s = <span class="function">() =&gt;</span> <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">str</span>()); <span class="comment">//fsllala</span></span><br></pre></td></tr></table></figure><ul><li>定义值的别名</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> value = <span class="built_in">boolean</span> | <span class="number">0</span> | <span class="string">&#x27;213&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//变量的值  只能是上面value定义的值</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">s</span>: value = <span class="string">&quot;213&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">s2</span>: value = <span class="string">&quot;111&quot;</span>; <span class="comment">//这里会报错,提示:  不能将类型“&quot;111&quot;”分配给类型“value”。</span></span><br></pre></td></tr></table></figure><h2 id="never类型"><a href="#never类型" class="headerlink" title="never类型"></a>never类型</h2><blockquote><p>TypeScript 将使用 never 类型来表示不应该存在的状态，也就是值永不存在的类型。</p></blockquote><ul><li>值会永不存在的两种情况：<ol><li>如果一个函数执行时抛出了<strong>异常</strong>，那么这个函数永远不存在返回值（因为抛出异常会直接中断程序运行，这使得程序运行不到返回值那一步，即具有不可达的终点，也就永不存在返回了）；</li><li>数中执行无限循环的代码（<strong>死循环</strong>），使得程序永远无法运行到函数返回值那一步，永不存在返回。</li></ol></li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 返回never的函数必须存在无法达到的终点</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">// 因为必定抛出异常，所以 error 将不会有返回值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">error</span>(<span class="params">message: <span class="built_in">string</span></span>): <span class="built_in">never</span> &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(message);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 因为存在死循环，所以 loop 将不会有返回值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">loop</span>(<span class="params"></span>): <span class="built_in">never</span> &#123;</span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>举一个我们可能会见到的例子：</p><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Foo</span> &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;保安&quot;</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Bar</span> &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;草莓&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">All</span> = <span class="title class_">Foo</span> | <span class="title class_">Bar</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">handleValue</span>(<span class="params">val: All</span>) &#123;</span><br><span class="line">    <span class="keyword">switch</span> (val.<span class="property">type</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;保安&#x27;</span>:</span><br><span class="line">            <span class="comment">// 这里 val 被收窄为 Foo</span></span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;草莓&#x27;</span>:</span><br><span class="line">            <span class="comment">// val 在这里是 Bar</span></span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            <span class="comment">//兜底逻辑 一般是不会进入这儿  如果进来了就是程序异常了</span></span><br><span class="line">            <span class="comment">// val 在这里是 never</span></span><br><span class="line">            <span class="keyword">const</span> <span class="attr">exhaustiveCheck</span>: <span class="built_in">never</span> = val</span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">handleValue</span>(&#123; <span class="attr">type</span>: <span class="string">&quot;草莓&quot;</span> &#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure><blockquote><p>比如新来了一个同事他新增了一个C接口，我们必须手动找到所有 switch 代码并处理，否则将有可能引入 BUG 。</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Foo</span> &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;保安&quot;</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Bar</span> &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;草莓&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> C &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;卷心菜&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">All</span> = <span class="title class_">Foo</span> | <span class="title class_">Bar</span> | C</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">handleValue</span>(<span class="params">val: All</span>) &#123;</span><br><span class="line">    <span class="keyword">switch</span> (val.<span class="property">type</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;保安&#x27;</span>:</span><br><span class="line">            <span class="comment">// 这里 val 被收窄为 Foo</span></span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;草莓&#x27;</span>:</span><br><span class="line">            <span class="comment">// val 在这里是 Bar</span></span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            <span class="comment">//兜底逻辑 一般是不会进入这儿  如果进来了就是程序异常了</span></span><br><span class="line">            <span class="keyword">const</span> <span class="attr">exhaustiveCheck</span>: <span class="built_in">never</span> = val;  <span class="comment">// 这里会报错,会提示: 不能将类型“C”分配给类型“never”</span></span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">handleValue</span>(&#123; <span class="attr">type</span>: <span class="string">&quot;草莓&quot;</span> &#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure><blockquote><p>所以通过这个办法，你可以确保 handleValue 总是穷尽 (exhaust) 了所有 All 的可能类型。</p></blockquote><h2 id="symbol类型"><a href="#symbol类型" class="headerlink" title="symbol类型"></a>symbol类型</h2><blockquote><p>ES6 引入了一种新的基本数据类型<code>Symbol</code>，表示独一无二的值；</p><p>内存地址的指针位置不同，所以是唯一值；</p></blockquote><ul><li><a href="https://es6.ruruanyifeng.com/#docs/symbol">阮一峰</a></li><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol">MDN</a></li><li><a href="https://zhuanlan.zhihu.com/p/22652486">JS 中的 Symbol 是什么？</a></li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Symbol(params)为基本数据类型,所以不能new;</span></span><br><span class="line"><span class="comment"> * params 可以不传,没啥实际意义,唯一作用是为了区分声明的symbol</span></span><br><span class="line"><span class="comment"> * params 一般传 number或者string</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">name1</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">name2</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">age</span>:<span class="built_in">symbol</span>=<span class="title class_">Symbol</span>(<span class="number">18</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//这个值看似一样，其实因为内存地址指针位置不同，所以是唯一值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1 === name2);  <span class="comment">// false</span></span><br></pre></td></tr></table></figure><ul><li>普通方法获取不到对象中的symbol属性</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">name1</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">name2</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">age</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="number">18</span>);</span><br><span class="line"><span class="keyword">let</span> obj1 = &#123;</span><br><span class="line">    [name1]: <span class="string">&quot;forward&quot;</span>,</span><br><span class="line">    [age]: <span class="number">24</span>,</span><br><span class="line">    <span class="attr">sex</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">height</span>: <span class="number">173</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i <span class="keyword">in</span> obj1) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(i); <span class="comment">// //只会打印出sex跟height，[name1]与[age]将打印不出来</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">keys</span>(obj1));  <span class="comment">// [ &#x27;sex&#x27;, &#x27;height&#x27; ]</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">getOwnPropertyNames</span>(obj1));  <span class="comment">// [ &#x27;sex&#x27;, &#x27;height&#x27; ]</span></span><br></pre></td></tr></table></figure><ul><li>获取对象中的symbol的属性的两种方式</li></ul><blockquote><p>静态方法 Reflect.ownKeys() 返回一个由目标对象自身的属性键组成的数组(Array)。</p><p>语法：Reflect.ownKeys(target) &#x3D;&gt; target 获取自身属性键的目标对象。</p><p>Reflect.ownKeys 方法返回一个由目标对象自身的属性键组成的<strong>数组</strong>。它的返回值等同于 Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target) ) 。</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">name1</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">name2</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="string">&quot;fsllala&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> <span class="attr">age</span>: <span class="built_in">symbol</span> = <span class="title class_">Symbol</span>(<span class="number">18</span>);</span><br><span class="line"><span class="keyword">let</span> obj1 = &#123;</span><br><span class="line">    [name1]: <span class="string">&quot;forward&quot;</span>,</span><br><span class="line">    [age]: <span class="number">24</span>,</span><br><span class="line">    <span class="attr">sex</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">height</span>: <span class="number">173</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//能打印出来两个Symbol，另外两个普通的不会打印出来</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">getOwnPropertySymbols</span>(obj1)); <span class="comment">// [ Symbol(fsllala), Symbol(18) ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Reflect.ownKeys() 此属性是将所有的属性都列出来</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Reflect</span>.<span class="title function_">ownKeys</span>(obj1)); <span class="comment">//[ &#x27;sex&#x27;, &#x27;height&#x27;, Symbol(fsllala), Symbol(18) ]</span></span><br></pre></td></tr></table></figure><h3 id="Symbol-iterator-迭代器-和-生成器-for-of"><a href="#Symbol-iterator-迭代器-和-生成器-for-of" class="headerlink" title="Symbol.iterator 迭代器 和 生成器 for of"></a>Symbol.iterator 迭代器 和 生成器 for of</h3><ul><li>一般来说Object对象是不能通过for…of来进行遍历的；</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj1 = &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">    <span class="attr">sex</span>:<span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里会报错</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">of</span> obj1); <span class="comment">// 类型“&#123; name: string; age: number; sex: number; &#125;”必须具有返回迭代器的 &quot;[Symbol.iterator]()&quot; 方法。</span></span><br></pre></td></tr></table></figure><ul><li>可以给Object对象提供一个Iterator方法，使对象也能使用for…of遍历；</li></ul><blockquote><ul><li>迭代器:Symbol.iterator</li></ul><p>要知道js的迭代器，我们就要先知道迭代的意思，实际上迭代的本意是遍历，随着不断有新的数据类型加入，我们就要用不同的for语句去循环，这就显得很麻烦，所以就有了迭代的概念 </p><ul><li>迭代</li></ul><p>所有数据类型的遍历都遵循的一个协议。所以以后你对遵循了迭代协议的数据类型 你只需要用迭代去遍历就可以了。顺便一提：for…of是用迭代器来实现的，只要你能用for…of来遍历的数据都是实现了迭代协议的数据</p><ul><li>实现的迭代协议的数据类型：</li></ul><p>string，array，map，set，arguments，Nodelist等dom元素 ；注意注意；<strong>没有object</strong> </p><ul><li>生成器: for…of</li></ul><p>for…of 会遍历可迭代的对象，调用对象上的 Symbol.iterator 方法。(此对象非彼对象，这个对 象是指你即将下手的目标)</p><p>对象也是不支持的，因为对象没用 Symbol.iterator 方法。</p></blockquote><h4 id="迭代器"><a href="#迭代器" class="headerlink" title="迭代器"></a>迭代器</h4><blockquote><p>迭代器Iterator 的用法</p><ol><li><p>Iterator 是 es6 引入的一种新的遍历机制 ，两个核心：</p><ol><li>迭代器是一个统一的接口，它的作用是使各种 数据结构 可被便捷的访问，它是通过一个键为 Symbol.iterator 的方法来实现。</li><li>迭代器是用于 遍历 数据结构元素的指针（如数据库中的游标）。</li></ol></li><li><p>使用迭代：</p><ol><li>实现的迭代协议的数据类型，里面都会有一个 [Symbol.iterator]方法</li><li>进行迭代的时候用迭代器的next来取值，这个next返回的是一个对象：<code>&#123;value：value,done:&quot;是否完成遍历&quot;&#125;</code></li><li>当 value是underfined 、done 为 true 时则遍历结束</li></ol></li><li><p>实现的迭代协议的数据类型：</p><p><code>string、array、map、set、arguments、Nodelist等dom元素;注意注意；没有object  </code></p></li></ol></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="attr">str</span>: <span class="built_in">string</span> = <span class="string">&quot;fsl&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">iterator</span>: <span class="title class_">Iterator</span>&lt;<span class="built_in">string</span>&gt; = str[<span class="title class_">Symbol</span>.<span class="property">iterator</span>]();</span><br><span class="line"></span><br><span class="line"><span class="comment">//next一次只遍历一个数，下一次调用将从上一次遍历到的位置开始下一个</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// &#123; value: &#x27;f&#x27;, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// &#123; value: &#x27;s&#x27;, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// &#123; value: &#x27;l&#x27;, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// &#123; value: undefined, done: true &#125;</span></span><br><span class="line"><span class="comment">//返回的有两个属性，一个value，一个done。value当读取到值的时候，done为false、读取不到为true</span></span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="title class_">Array</span>&lt;<span class="built_in">number</span>&gt; = [<span class="number">1</span>, <span class="number">5</span>, <span class="number">6</span>]; <span class="comment">// 泛型</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">iterator</span>: <span class="title class_">Iterator</span>&lt;<span class="built_in">number</span>&gt; = arr[<span class="title class_">Symbol</span>.<span class="property">iterator</span>]()<span class="comment">//注意这里的接收类型&lt;number&gt;是固定要写的</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//next一次只遍历一个数，下一次调用将从上一次遍历到的位置开始下一个</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">//&#123; value: 1, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">//&#123; value: 5, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">//&#123; value: 6, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">//&#123; value: undefined, done: true &#125;</span></span><br><span class="line"><span class="comment">//返回的有两个属性，一个value，一个done。value当读取到值的时候，done为false、读取不到为true</span></span><br></pre></td></tr></table></figure><ul><li>实现一个简易的迭代器</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>: <span class="title class_">Array</span>&lt;<span class="built_in">number</span> | <span class="built_in">string</span>&gt; = [<span class="string">&quot;泛型&quot;</span>, <span class="string">&quot;实现简单的迭代器&quot;</span>];</span><br><span class="line"><span class="keyword">let</span> <span class="attr">set</span>: <span class="title class_">Set</span>&lt;<span class="built_in">number</span>&gt; = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]);   </span><br><span class="line"><span class="keyword">function</span> <span class="title function_">iteratorFun</span>(<span class="params">args: <span class="built_in">any</span></span>): <span class="built_in">void</span> &#123; <span class="comment">//这里定义为any类型是因为上面要传到这里的有多种不同类型</span></span><br><span class="line">    <span class="keyword">const</span> <span class="attr">it</span>: <span class="title class_">Iterator</span>&lt;<span class="built_in">any</span>&gt; = args[<span class="title class_">Symbol</span>.<span class="property">iterator</span>]();</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">next</span>: <span class="built_in">any</span> = &#123; <span class="attr">done</span>: <span class="literal">false</span> &#125;;</span><br><span class="line">    <span class="keyword">while</span> (!next.<span class="property">done</span>) &#123; <span class="comment">//判断next，由于next默认为fasle，while循环只有true会通过，所以需要 取反</span></span><br><span class="line">        next = it.<span class="title function_">next</span>(); <span class="comment">//刚开始是声明next给个默认值，等到开始循环的时候再把真正的值赋给他</span></span><br><span class="line">        <span class="keyword">if</span> (!next.<span class="property">done</span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(next);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">iteratorFun</span>(arr);</span><br><span class="line"><span class="title function_">iteratorFun</span>(set);</span><br></pre></td></tr></table></figure><h2 id="泛型"><a href="#泛型" class="headerlink" title="泛型"></a>泛型</h2><blockquote><p>泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候在指定类型的一种特性</p></blockquote><h3 id="函数泛型"><a href="#函数泛型" class="headerlink" title="函数泛型"></a>函数泛型</h3><p>我写了两个函数一个是数字类型的函数，另一个是字符串类型的函数,其实就是类型不同，实现的功能是一样的，这时候我们就可以使用泛型来优化。</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">num</span>(<span class="params">a: <span class="built_in">number</span>, b: <span class="built_in">number</span></span>): <span class="title class_">Array</span>&lt;<span class="built_in">number</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> [a, b];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">str</span>(<span class="params">a: <span class="built_in">string</span>, b: <span class="built_in">string</span></span>): <span class="title class_">Array</span>&lt;<span class="built_in">string</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> [a, b];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">num</span>(<span class="number">1</span>, <span class="number">2</span>));  <span class="comment">// [ 1, 2 ]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">str</span>(<span class="string">&#x27;fsllala&#x27;</span>, <span class="string">&#x27;18&#x27;</span>)); <span class="comment">// [ &#x27;fsllala&#x27;, &#x27;18&#x27; ]</span></span><br></pre></td></tr></table></figure><ul><li>泛型优化</li></ul><blockquote><p>语法为函数名字后面跟一个&lt;参数名&gt; 参数名可以随便写 例如我这儿写了T；</p><p>当我们使用这个函数的时候把参数的类型传进去就可以了 （也就是动态类型）；</p><p>即：定义这个函数的时候，不定义参数的类型，而是让调用者告知我这里的参数是什么类型；</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> add&lt;T&gt;(<span class="attr">a</span>: T, <span class="attr">b</span>: T): <span class="title class_">Array</span>&lt;T&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> [a, b];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">add&lt;<span class="built_in">number</span>&gt;(<span class="number">1</span>,<span class="number">2</span>);</span><br><span class="line">add&lt;<span class="built_in">string</span>&gt;(<span class="string">&quot;fsllala&quot;</span>,<span class="string">&#x27;18&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//甚至我们可以简写</span></span><br><span class="line"><span class="title function_">add</span>(<span class="number">1</span>,<span class="number">2</span>)</span><br><span class="line"><span class="title function_">add</span>(<span class="string">&#x27;1&#x27;</span>,<span class="string">&#x27;2&#x27;</span>)<span class="comment">//编辑器会自动推断类型，但最好还是写一下，如果你知道你具体需要的是什么的话</span></span><br></pre></td></tr></table></figure><blockquote><p>我们也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> sub&lt;T, U&gt;(<span class="attr">a</span>: T, <span class="attr">b</span>: U): <span class="title class_">Array</span>&lt;T | U&gt; &#123;</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">arr</span>: <span class="title class_">Array</span>&lt;T | U&gt; = [a, b];</span><br><span class="line">    <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">sub&lt;<span class="built_in">number</span>,<span class="built_in">boolean</span>&gt;(<span class="number">66</span>,<span class="literal">true</span>);</span><br></pre></td></tr></table></figure><h3 id="泛型接口"><a href="#泛型接口" class="headerlink" title="泛型接口"></a>泛型接口</h3><blockquote><p>声明接口的时候 在名字后面加一个 &lt;参数&gt;</p><p>使用的时候传递类型</p></blockquote><ul><li>使用含有泛型的接口来定义对象的形状：</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">IKun</span>&lt;T&gt; &#123;</span><br><span class="line">    <span class="attr">name</span>: T,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">hobby</span>: T[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun</span>: <span class="title class_">IKun</span>&lt;<span class="built_in">string</span>&gt; = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;lala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">hobby</span>: [<span class="string">&quot;唱&quot;</span>, <span class="string">&quot;跳&quot;</span>, <span class="string">&quot;rap&quot;</span>, <span class="string">&quot;篮球&quot;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>泛型接口默认值</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">IKun</span>&lt;T = <span class="built_in">string</span>&gt; &#123;</span><br><span class="line">    <span class="attr">name</span>: T,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">hobby</span>: T[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里不写类型就会走默认值</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun</span>: <span class="title class_">IKun</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;lala&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">hobby</span>: [<span class="string">&quot;唱&quot;</span>, <span class="string">&quot;跳&quot;</span>, <span class="string">&quot;rap&quot;</span>, <span class="string">&quot;篮球&quot;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>使用含有泛型的接口来定义函数的形状：</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">CreateArrayFunc</span>&lt;T&gt; &#123;</span><br><span class="line">    (<span class="attr">length</span>: <span class="built_in">number</span>, <span class="attr">value</span>: T): <span class="title class_">Array</span>&lt;T&gt;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">createArrayFunc</span>: <span class="title class_">CreateArrayFunc</span>&lt;<span class="built_in">string</span>&gt;;</span><br><span class="line"></span><br><span class="line">createArrayFunc = <span class="keyword">function</span> &lt;T&gt;(<span class="attr">length</span>: <span class="built_in">number</span>, <span class="attr">value</span>: T): <span class="title class_">Array</span>&lt;T&gt; &#123;</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">result</span>: T[] = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; length; i++) &#123;</span><br><span class="line">        result[i] = value;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> results = <span class="title function_">createArrayFunc</span>(<span class="number">3</span>, <span class="string">&quot;x&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(results);  <span class="comment">// [ &#x27;x&#x27;, &#x27;x&#x27;, &#x27;x&#x27; ]</span></span><br></pre></td></tr></table></figure><h3 id="泛型类"><a href="#泛型类" class="headerlink" title="泛型类"></a>泛型类</h3><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Point</span>&lt;T&gt;&#123;</span><br><span class="line">    <span class="attr">x</span>: T</span><br><span class="line">    <span class="attr">y</span>: T</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">x: T, y: T</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">x</span> = x;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">y</span> = y;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> point1 = <span class="keyword">new</span> <span class="title class_">Point</span>&lt;<span class="built_in">number</span>&gt;(<span class="number">11</span>, <span class="number">22</span>);</span><br><span class="line"><span class="keyword">const</span> point2 = <span class="keyword">new</span> <span class="title class_">Point</span>&lt;<span class="built_in">string</span>&gt;(<span class="string">&#x27;11&#x27;</span>, <span class="string">&#x27;22&#x27;</span>);</span><br></pre></td></tr></table></figure><h3 id="泛型约束"><a href="#泛型约束" class="headerlink" title="泛型约束"></a>泛型约束</h3><figure class="highlight typescript"><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"><span class="comment">// 下面代码是会报错的</span></span><br><span class="line"><span class="keyword">function</span> getLength&lt;T&gt;(<span class="attr">args</span>:T)&#123;</span><br><span class="line">    <span class="keyword">return</span> args.<span class="property">length</span>; <span class="comment">//这里会报错,提示: 类型“T”上不存在属性“length”。</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>使用<code>extends</code>关键字添加泛型约束；</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Ilength</span> &#123;</span><br><span class="line">    <span class="attr">length</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> getLength&lt;T <span class="keyword">extends</span> <span class="title class_">Ilength</span>&gt;(<span class="attr">args</span>: T) &#123;</span><br><span class="line">    <span class="keyword">return</span> args.<span class="property">length</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 只要传入的实参有length属性,且值是number类型的就行;</span></span><br><span class="line"><span class="comment">// 即：有number类型的length就实现了接口Len</span></span><br><span class="line"><span class="title function_">getLength</span>(<span class="string">&quot;123&quot;</span>);</span><br><span class="line"><span class="title function_">getLength</span>([<span class="number">1</span>, <span class="number">2</span>]);</span><br><span class="line"><span class="title function_">getLength</span>(&#123; <span class="attr">length</span>: <span class="number">77</span> &#125;);</span><br></pre></td></tr></table></figure><ul><li><p>使用<code>keyof </code>约束对象</p><p>平时在开发中我们可能会看到一些常用的名称：</p><ul><li>T：Type的缩写，类型；</li><li>K、V：key和value的缩写，键值对；</li><li>E：Element的缩写，元素；</li><li>O：Object的缩写，对象；</li></ul></li></ul><p>下面场景不会报错:</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> prop&lt;O&gt;(<span class="attr">obj</span>: O, keys) &#123;</span><br><span class="line">    <span class="keyword">return</span> obj[keys];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> info = &#123; <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span>, <span class="attr">c</span>: <span class="number">3</span> &#125;;</span><br><span class="line"><span class="title function_">prop</span>(info, <span class="string">&quot;a&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">prop</span>(info, <span class="string">&quot;d&quot;</span>));  <span class="comment">// undefined  现在没有 o[&quot;d&quot;];但是不报错;</span></span><br></pre></td></tr></table></figure><blockquote><p>解决方法：其中使用了TS泛型和泛型约束。使用<code>extends</code>关键字添加泛型约束，keyof操作符获取对象键的联合类型；</p></blockquote><ul><li>keyof 操作符</li></ul><figure class="highlight typescript"><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="keyword">interface</span> <span class="title class_">IKun</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">IKunKeys</span> = keyof <span class="title class_">IKun</span>; </span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * keyof 操作符获取 IKun 接口的所有键，它的返回类型是联合类型;以上写法等同于下面这个</span></span><br><span class="line"><span class="comment"> * type IKunKeys = &quot;name&quot;|&quot;age&quot; ; </span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun</span>: <span class="title class_">IKunKeys</span> = <span class="string">&quot;name&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun2</span>: <span class="title class_">IKunKeys</span> = <span class="string">&quot;age&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun3</span>: <span class="title class_">IKunKeys</span> = <span class="string">&quot;sex&quot;</span>; <span class="comment">// 不能将类型“&quot;sex&quot;”分配给类型“keyof IKun”</span></span><br></pre></td></tr></table></figure><blockquote><p>如上问题的解决：</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 用keyof 分隔 O,分隔完之后,就是联合类型: &quot;a&quot; | &quot;b&quot; | &quot;c&quot;,最后用K继承联合类型,即K就是联合类型:&quot;a&quot; | &quot;b&quot; | &quot;c&quot;</span></span><br><span class="line"><span class="keyword">function</span> prop&lt;O, K <span class="keyword">extends</span> keyof O&gt;(<span class="attr">obj</span>: O, <span class="attr">keys</span>: K) &#123;</span><br><span class="line">    <span class="keyword">return</span> obj[keys];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> info = &#123; <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span>, <span class="attr">c</span>: <span class="number">3</span> &#125;;</span><br><span class="line"><span class="title function_">prop</span>(info, <span class="string">&quot;a&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">prop</span>(info, <span class="string">&quot;d&quot;</span>));  <span class="comment">// 现在报错了,提示: 类型“&quot;d&quot;”的参数不能赋给类型“&quot;a&quot; | &quot;b&quot; | &quot;c&quot;”的参数。</span></span><br></pre></td></tr></table></figure><h3 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h3><p><a href="https://juejin.cn/post/7006483218765447182#heading-3">TS系列篇｜泛型</a></p><h2 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h2><blockquote><p>先来看一个现象：不同TS模块下会产生命名冲突：</p></blockquote><figure class="highlight typescript"><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"><span class="comment">// index.ts</span></span><br><span class="line"><span class="keyword">const</span> name1 = <span class="string">&quot;fsllala123&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1);</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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"><span class="comment">// index2.ts</span></span><br><span class="line"><span class="keyword">const</span> name1=<span class="string">&quot;fsllala456&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/namespace1675417635460.png" alt="模块化"></p><blockquote><p>什么是模块化？</p></blockquote><ul><li>JavaScript 规范声明任何没有 export 的 JavaScript 文件都应该被认为是一个脚本，而非一个模块。在一个脚本文件中，变量和类型会被声明在共享的全局作用域。</li><li>如果你有一个文件，现在没有任何 import 或者 export，但是你希望它被作为模块处理，添加这行代码； 这会把文件改成一个没有导出任何内容的模块，这个语法可以生效，无论你的模块目标是什么。</li></ul><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span>&#123;&#125;;</span><br></pre></td></tr></table></figure><h3 id="ES-Module"><a href="#ES-Module" class="headerlink" title="ES Module"></a>ES Module</h3><blockquote><p>TypeScript中最主要使用的模块化方案就是ES Module，也就是ES6的写法，详见文章<a href="https://fsllala.top/articles/4dee6fea.html">模块化规范</a>；</p></blockquote><blockquote><p>TS文件中，即使两个不同的TS文件，比如<code>index.ts</code>和<code>index2.ts</code>，命名同一个变量，也会起冲突。因为它的内容被视为全局可见的（因此对模块也是可见的）</p></blockquote><blockquote><p>TypeScript与ECMAScript 2015一样，任何包含顶级import或者export的文件都被当成一个模块。相反地，如果一个文件不带有顶级的import或者export声明，那么它的内容被视为全局可见的（因此对模块也是可见的）</p></blockquote><h4 id="ES6模块化"><a href="#ES6模块化" class="headerlink" title="ES6模块化"></a>ES6模块化</h4><ul><li>解决全局变量冲突(每个文件添加export{}即可)</li></ul><figure class="highlight typescript"><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"><span class="comment">// index.ts</span></span><br><span class="line"><span class="keyword">const</span> name1 = <span class="string">&quot;fsllala123&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1);<span class="comment">// fsllala123</span></span><br><span class="line"><span class="keyword">export</span>&#123;&#125;</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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"><span class="comment">// index2.ts</span></span><br><span class="line"><span class="keyword">const</span> name1=<span class="string">&quot;fsllala456&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1); <span class="comment">// fsllala456</span></span><br><span class="line"><span class="keyword">export</span>&#123;&#125;</span><br></pre></td></tr></table></figure><ul><li>模块化引用</li></ul><figure class="highlight typescript"><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"><span class="comment">// index.ts</span></span><br><span class="line"><span class="keyword">const</span> name1 = <span class="string">&quot;fsllala123&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> &#123; name1 &#125;</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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"><span class="comment">// index2.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; name1 &#125; <span class="keyword">from</span> <span class="string">&quot;./index&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1); <span class="comment">// fsllala123</span></span><br></pre></td></tr></table></figure><h4 id="内置类型导入"><a href="#内置类型导入" class="headerlink" title="内置类型导入"></a>内置类型导入</h4><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// type.ts 声明TS类型</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> <span class="title class_">IKun</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">hobby</span>: <span class="built_in">string</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">type</span> <span class="title class_">IPerson</span> = <span class="built_in">string</span> | <span class="built_in">number</span>;</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js 使用</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这两种写法都可以  使用 type 前缀,表明被导入的是一个类型;</span></span><br><span class="line"><span class="comment">// import &#123; type IKun, type IPerson &#125; from &quot;./type&quot;;</span></span><br><span class="line"><span class="keyword">import</span> <span class="keyword">type</span> &#123; <span class="title class_">IKun</span>, <span class="title class_">IPerson</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./type&quot;</span>; <span class="comment">// 相当于把type提出来了</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">person1</span>: <span class="title class_">IPerson</span> = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">kunkun</span>: <span class="title class_">IKun</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;xiaoheizi&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">hobby</span>: [<span class="string">&quot;唱&quot;</span>, <span class="string">&quot;跳&quot;</span>, <span class="string">&quot;rap&quot;</span>, <span class="string">&quot;篮球&quot;</span>]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(kunkun);</span><br></pre></td></tr></table></figure><p>这里需要注意的是：不使用type前缀，也可以导入类型。那么为啥要加上type前缀呢？</p><blockquote><p>TS最终要被编译成JS代码，类型是没用的，通过语法识别TS&#x2F;JS的成本要比直接引入的时候就用type表明了是类型的成本大，到时候类型部分的代码就直接删除了；</p></blockquote><h3 id="namespace命名空间"><a href="#namespace命名空间" class="headerlink" title="namespace命名空间"></a>namespace命名空间</h3><ul><li><p>不同TS模块下会产生命名冲突：</p></li><li><p>我们在工作中无法避免全局变量造成的污染，TypeScript提供了namespace 避免这个问题出现</p><ul><li>内部模块，主要用于组织代码，避免命名冲突</li><li>命名空间内的类默认私有</li><li>通过 <code>namespace</code> 关键字定义，然后通过 <code>export</code> 暴露；(<code>namespace</code>里面如果不通过<code>export</code>暴露，那么外面访问不到)</li></ul></li></ul><h4 id="namespace常规写法"><a href="#namespace常规写法" class="headerlink" title="namespace常规写法"></a>namespace常规写法</h4><ul><li>namespace，里面不使用export：</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//不能获取到里面的属性,在命名空间外访问是一个空对象</span></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">    <span class="keyword">const</span> age1 = <span class="number">18</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>); <span class="comment">// &#123;&#125;</span></span><br></pre></td></tr></table></figure><ul><li>namespace，里面使用export：</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 可以获取到里面的属性了</span></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>); <span class="comment">// 是个对象 &#123; name1: &#x27;fsllala&#x27;, age1: 18 &#125;</span></span><br></pre></td></tr></table></figure><ul><li>同一模块(不同模块)下有重名的namespace，里面属性会合并</li></ul><blockquote><p>因为属性会合并，所以会出现以下情况：</p></blockquote><ul><li>重名namespace属性合并，情况一：</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不同命名空间的属性名不冲突</span></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>); <span class="comment">// &#123; name1: &#x27;fsllala&#x27;, age1: 18 &#125;</span></span><br></pre></td></tr></table></figure><ul><li>重名namespace属性合并，情况二：</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 属性或方法使用const/let定义,会报错:</span></span><br><span class="line"><span class="comment"> * 其实也不难理解：</span></span><br><span class="line"><span class="comment"> * 命名空间一样的合并,即:在一个对象里面,const/let在一个对象里面会有产生块级作用域;</span></span><br><span class="line"><span class="comment"> * const/let在同一作用域无法重新声明变量</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;  <span class="comment">// 无法重新声明块范围变量“name1”。</span></span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>;  <span class="comment">// 无法重新声明块范围变量“age1”。</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;  <span class="comment">// 无法重新声明块范围变量“name1”。</span></span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>; <span class="comment">// 无法重新声明块范围变量“age1”。</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>重名namespace属性合并，情况三：</li></ul><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 属性或方法使用var定义,么的问题:</span></span><br><span class="line"><span class="comment"> * 后者会覆盖前者</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">var</span> name1 = <span class="string">&quot;fsllala&quot;</span>; </span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">var</span> age1 = <span class="number">18</span>; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">var</span> name1 = <span class="string">&quot;fsllala&quot;</span>; </span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">var</span> age1 = <span class="number">18</span>; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>); <span class="comment">// &#123; name1: &#x27;fsllala&#x27;, age1: 18 &#125;</span></span><br></pre></td></tr></table></figure><h4 id="嵌套命名空间"><a href="#嵌套命名空间" class="headerlink" title="嵌套命名空间"></a>嵌套命名空间</h4><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// namespace里面套namespace(ps:同理里面的namespace如果没有export,外面访问不到)</span></span><br><span class="line"><span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">namespace</span> BB &#123;</span><br><span class="line">        <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">        <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>); <span class="comment">// 是个对象  &#123; BB: &#123; name1: &#x27;fsllala&#x27;, age1: 18 &#125; &#125;</span></span><br></pre></td></tr></table></figure><h4 id="抽离命名空间"><a href="#抽离命名空间" class="headerlink" title="抽离命名空间"></a>抽离命名空间</h4><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.ts里导出文件</span></span><br><span class="line"><span class="comment">// 将最外层 namespace 通过 export导出</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">namespace</span> AA &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">namespace</span> BB &#123;</span><br><span class="line">        <span class="keyword">export</span> <span class="keyword">const</span> name1 = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">        <span class="keyword">export</span> <span class="keyword">const</span> age1 = <span class="number">18</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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"><span class="comment">// index2.ts里面导入文件</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="variable constant_">AA</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./index&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">AA</span>);  <span class="comment">// &#123; BB: &#123; name1: &#x27;fsllala&#x27;, age1: 18 &#125; &#125;</span></span><br></pre></td></tr></table></figure><h4 id="简化命名空间"><a href="#简化命名空间" class="headerlink" title="简化命名空间"></a>简化命名空间</h4><blockquote><p>除了使用<code>const</code>还可以使用<code>import</code>来简化；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index2.ts里面导入文件</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="variable constant_">AA</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./index&quot;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="variable constant_">AA</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./index&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 感觉太长了</span></span><br><span class="line"><span class="comment">// console.log(AA.BB.name1);  // fsllala</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//method1:</span></span><br><span class="line"><span class="keyword">const</span> method1 = <span class="variable constant_">AA</span>.<span class="property">BB</span>.<span class="property">name1</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(method1);  <span class="comment">//fsllala</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//method2:</span></span><br><span class="line"><span class="keyword">import</span> method2 = <span class="variable constant_">AA</span>.<span class="property">BB</span>.<span class="property">name1</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`method2:<span class="subst">$&#123;method2&#125;</span>`</span>); <span class="comment">// method2:fsllala</span></span><br></pre></td></tr></table></figure><h2 id="in操作符"><a href="#in操作符" class="headerlink" title="in操作符"></a>in操作符</h2><blockquote><p>如果指定的属性在指定的对象或其原型链中，则 in 运算符返回true；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Fish</span> &#123;</span><br><span class="line">    <span class="title function_">swim</span>(): <span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Dog</span> &#123;</span><br><span class="line">    <span class="attr">run</span>: <span class="function">() =&gt;</span> <span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">move</span>(<span class="params">animal: Fish | Dog</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="string">&quot;swim&quot;</span> <span class="keyword">in</span> animal) &#123;</span><br><span class="line">        animal.<span class="title function_">swim</span>(); <span class="comment">// fish is swiming~~</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        animal.<span class="title function_">run</span>();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">move</span>(&#123;</span><br><span class="line">    <span class="title function_">swim</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;fish is swiming~~&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="三斜线指令"><a href="#三斜线指令" class="headerlink" title="三斜线指令"></a>三斜线指令</h2><blockquote><p>重点：我们知道在 TS 项目中，文件之间相互引用是通过<code> import</code>来实现的，那么声明文件之间的引用呢？没错通过<strong>三斜线指令</strong>。</p></blockquote><p>三斜线指令常用的就两个功能：</p><ul><li>倒入声明文件</li><li>倒入第三方包</li></ul><p>如果对比 import 的功能，我们可以写出如下的等式：</p><ul><li><code>/// &lt;reference path=&quot;...&quot; /&gt;</code> &#x3D;&#x3D; <code>import filename.xxx</code></li><li><code>/// &lt;reference types=&quot;...&quot; /&gt;</code> &#x3D;&#x3D; <code>import lodash from &quot;lodash&quot;</code></li></ul><blockquote><p>PS：下方代码使用<code>ts-node</code>输出有有问题，暂未找到解决方法；</p><p>But 通过<code>tsc --outFile sample.js index.ts</code>将<code>index.ts</code>编译成<code>sample.js</code>方法可行</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在a.ts</span></span><br><span class="line"><span class="keyword">namespace</span> A &#123;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">fn</span> = (<span class="params"></span>) =&gt; <span class="string">&#x27;a&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//在b.ts</span></span><br><span class="line"><span class="keyword">namespace</span> A &#123;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">fn2</span> = (<span class="params"></span>) =&gt; <span class="string">&#x27;b&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//在index.ts</span></span><br><span class="line"><span class="comment">///&lt;reference path=&quot;./index2.ts&quot; /&gt;</span></span><br><span class="line"><span class="comment">///&lt;reference path=&quot;./index3.ts&quot; /&gt;</span></span><br><span class="line"><span class="comment">//引入之后直接可以使用变量 A</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(A);</span><br></pre></td></tr></table></figure><h2 id="声明文件"><a href="#声明文件" class="headerlink" title="声明文件"></a>声明文件</h2><blockquote><p>这里环境为：vite+vue3+ts；</p></blockquote><ul><li>我们之前编写的typescript文件都是 .ts 文件，这些文件最终会输出 .js 文件，也是我们通常编写代码的地方；</li><li>还有另外一种文件 .d.ts 文件，它是用来做类型的声明(declare)，称之为类型声明（Type Declaration）或者类型定义（Type<br>Definition）文件。</li><li>.d.ts文件是不需要导出的；让他直接在全局就ok；</li></ul><h3 id="外部定义类型声明-–-第三方库"><a href="#外部定义类型声明-–-第三方库" class="headerlink" title="外部定义类型声明 – 第三方库"></a>外部定义类型声明 – 第三方库</h3><p>有一些第三方库是没有写自己的声明文件的，我们在引用的时候，会报错。以<code>lodash</code>库为例(lodash是有第三方写好的声明文件库的，这里我们自己写)。</p><ol><li>安装第三方库</li></ol><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i --save lodash</span><br></pre></td></tr></table></figure><ol start="2"><li>在vue文件中进入第三方库，由于没有声明文件，所以会报错。</li></ol><p><img src="https://img.fsllala.top/smwj1688632505923.png"></p><ol start="3"><li>手写声明文件</li></ol><p>这里新建一个d.ts文件，例如 fsllala.d.ts</p><figure class="highlight typescript"><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"><span class="comment">// fsllala.d.ts</span></span><br><span class="line"><span class="comment">// 根据 import _ from &quot;lodash&quot; 得知 lodash是从模块导入的; 所以声明一个模块,即: declare module</span></span><br><span class="line"><span class="keyword">declare</span> <span class="variable language_">module</span> <span class="string">&quot;lodash&quot;</span>;</span><br></pre></td></tr></table></figure><p>然后在<code>lodash.vue</code>中发现报错消失了，即可以使用第三方库了(如果还报错，重启VS Code即可)；</p><ol start="4"><li>但是还不知道模块里面有什么东西，所以使用的时候不会有提示。可以在模块内部作用域自定义函数，解决不提示的问题。</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//  fsllala.d.ts</span></span><br><span class="line"><span class="comment">// &#123;&#125;代表模块内部作用域,里面可以导出一些function;</span></span><br><span class="line"><span class="keyword">declare</span> <span class="variable language_">module</span> <span class="string">&quot;lodash&quot;</span>&#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">max</span>(<span class="params">...args:<span class="built_in">any</span>[]</span>):<span class="built_in">any</span>;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">mean</span>(<span class="params">...args:<span class="built_in">any</span>[]</span>):<span class="built_in">any</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight tsx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// lodash.vue 输入_.有相关的api提示;</span></span><br><span class="line">&lt;script setup lang=<span class="string">&quot;ts&quot;</span>&gt;</span><br><span class="line"><span class="keyword">import</span> _ <span class="keyword">from</span> <span class="string">&quot;lodash&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(_.<span class="title function_">max</span>([<span class="number">4</span>, <span class="number">2</span>, <span class="number">8</span>, <span class="number">6</span>])); <span class="comment">// 8</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(_.<span class="title function_">mean</span>([<span class="number">4</span>, <span class="number">2</span>, <span class="number">8</span>, <span class="number">6</span>])); <span class="comment">// 5</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure><h3 id="自己代码类型声明"><a href="#自己代码类型声明" class="headerlink" title="自己代码类型声明"></a>自己代码类型声明</h3><ul><li>一般来说TS的类型是不需要单独抽离到d.ts文件中的。但是一些全局声明的变量&#x2F;函数&#x2F;类例外。</li></ul><figure class="highlight js"><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">// vue中的 index.html中</span></span><br><span class="line"><span class="comment">// 变量</span></span><br><span class="line"><span class="keyword">const</span> whyName = <span class="string">&quot;Fsllala&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> whyAge = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">const</span> whyHeight = <span class="number">188</span>;</span><br><span class="line"><span class="comment">// 函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">globalFunc</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`this is globalFunction~<span class="subst">$&#123;args&#125;</span>`</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 类</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name, age</span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/smwj21688638518386.png" alt="声明文件"></p><p>上面如果是JS，就可以直接引用了(把script标签中的 “lang&#x3D;’ts’”去掉，就可以用了)；显然是ts的问题；</p><ul><li>新建一个d.ts的声明文件</li></ul><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 为自己的全局  变量/函数/类 定义类型声明</span></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> <span class="attr">whyName</span>: <span class="built_in">string</span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> <span class="attr">whyAge</span>: <span class="built_in">number</span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> <span class="attr">whyHeight</span>: <span class="built_in">number</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">function</span> <span class="title function_">globalFunc</span>(<span class="params">args: <span class="built_in">string</span></span>): <span class="built_in">string</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后在<code>lodash.vue</code>中发现报错消失了，即可以使用全局变量&#x2F;函数&#x2F;类了(如果还报错，重启VS Code即可)；</p><h2 id="Partial"><a href="#Partial" class="headerlink" title="Partial"></a>Partial<Type></h2><blockquote><p>用于构造一个Type下面的所有属性都设置为可选的类型；</p></blockquote><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 写法: Partial&lt;Type&gt;</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">IKun</span>&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">hobby</span>:<span class="built_in">string</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">IKunOptional</span> = <span class="title class_">Partial</span>&lt;<span class="title class_">IKun</span>&gt;;</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/partial1688641139388.png" alt="Partial"></p><h2 id="Record-lt-Keys-Type-gt"><a href="#Record-lt-Keys-Type-gt" class="headerlink" title="Record&lt;Keys, Type&gt;"></a>Record&lt;Keys, Type&gt;</h2><blockquote><p>用于构造一个对象类型，它所有的key(键)都是Keys类型，它所有的value(值)都是Type类型。</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">IKun</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    hobby?: <span class="built_in">string</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> t1 = <span class="string">&quot;上海&quot;</span> | <span class="string">&quot;北京&quot;</span> | <span class="string">&quot;洛杉矶&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">IKuns</span> = <span class="title class_">Record</span>&lt;t1, <span class="title class_">IKun</span>&gt;;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> *  鼠标放到 IKuns 会显示:</span></span><br><span class="line"><span class="comment"> * type IKuns = &#123;</span></span><br><span class="line"><span class="comment">    上海: IKun;</span></span><br><span class="line"><span class="comment">    北京: IKun;</span></span><br><span class="line"><span class="comment">    洛杉矶: IKun;</span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment"> * 所以说 上海/北京/洛杉矶 一个都不能少</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 上海/北京/洛杉矶 一个都不能少</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">ikuns</span>: <span class="title class_">IKuns</span> = &#123;</span><br><span class="line">    <span class="string">&quot;上海&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;xxx&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&quot;北京&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;xxx&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&quot;洛杉矶&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;xxx&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
       
       
       <categories>
@@ -162,7 +162,7 @@
       <link href="/articles/5fc41a6b.html"/>
       <url>/articles/5fc41a6b.html</url>
       
-        <content type="html"><![CDATA[<h1 id="登录凭证"><a href="#登录凭证" class="headerlink" title="登录凭证"></a>登录凭证</h1><blockquote><p>登录成功返回凭证：<code>cookie+session</code>或者是<code>Token令牌</code>；现在基本都是<code>Token令牌</code>作为登录凭证；</p></blockquote><h2 id="为什么需要登录凭证呢？"><a href="#为什么需要登录凭证呢？" class="headerlink" title="为什么需要登录凭证呢？"></a>为什么需要登录凭证呢？</h2><blockquote><p>web开发中，我们使用最多的协议是<code>http</code>，但是<code>http</code>是一个<strong>无状态</strong>的协议。那什么叫做无状态协议呢？</p></blockquote><ul><li>举个例子：<ul><li>我们登录了一个网站 <a href="http://www.fsllala.top;/">www.fsllala.top；</a></li><li>登录的时候我们需要输入用户名和密码：比如用户名<code>forward</code>，密码：<code>Forward666</code>;</li><li>登录成功之后，我们要以<code>forward</code>的身份去访问其他的数据和资源，还是通过<code>http</code>请求去访问。<ul><li>fsllala的服务器会问：你谁呀？</li><li>forward说：我是forward呀，刚刚登录过呀；</li><li>fsllala：怎么证明你刚刚登录过呀？</li><li>forward说：这。。。，http没有告诉你吗？</li><li>fsllala：http的每次请求对我来说都是一个单独的请求，和之前请求过什么没有关系。</li></ul></li></ul></li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224477117cookie.png" alt="cookie"></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224528691cookie.png" alt="cookie"></p><blockquote><p>看到了吧？这就是http的无状态，也就是服务器不知道你上一步做了什么，我们必须得有一个办法可以证明我们登录过；</p></blockquote><ul><li>那如何证明刚才就是我登录的啊？<ul><li>登陆成功的时候服务器给我们发过来一个<strong>登录凭证</strong>，访问其他资源的时候，通过这个<strong>登录凭证</strong>来证明刚才就是我登录的，而且我能访问哪些资源，不能访问哪些资源，都可以通过<strong>登录凭证</strong>来决定；</li></ul></li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1673224500212cookie.png" alt="cookie"></p><ul><li>目前登录凭证有两种：<ul><li><code>cookie+session</code>(逐渐淘汰)</li><li><code>Token</code>令牌</li></ul></li></ul><h2 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h2><ol><li>在提供标记的接口，通过 HTTP 返回头的 Set-Cookie 字段，直接「种」到浏览器上；</li><li>浏览器发起请求时，会<strong>自动</strong>把 cookie 通过 HTTP 请求头的 Cookie 字段，带给接口；</li></ol><h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><ol><li>Domain &#x2F; Path</li></ol><blockquote><p>你不能拿清华的校园卡进北大。</p></blockquote><p>​       cookie 是要限制::「空间范围」::的，通过 Domain（域）&#x2F; Path（路径）两级。</p><blockquote><p>Domain属性指定浏览器发出 HTTP 请求时，哪些域名要附带这个 Cookie。如果没有指定该属性，浏览器会默认将其设为当前 URL 的一级域名，比如 <a href="http://www.example.com/">www.example.com</a> 会设为 example.com，而且以后如果访问example.com的任何子域名，HTTP 请求也会带上这个 Cookie。如果服务器在Set-Cookie字段指定的域名，不属于当前域名，浏览器会拒绝这个 Cookie。Path属性指定浏览器发出 HTTP 请求时，哪些路径要附带这个 Cookie。只要浏览器发现，Path属性是 HTTP 请求路径的开头一部分，就会在头信息里面带上这个 Cookie。比如，PATH属性是&#x2F;，那么请求&#x2F;docs路径也会包含该 Cookie。当然，前提是域名必须一致。<a href="http://javascript.ruanyifeng.com/bom/cookie">—— Cookie — JavaScript 标准参考教程（alpha）</a></p></blockquote><ol start="2"><li><p>Expires &#x2F; Max-Age</p><blockquote><p>你毕业了卡就不好使了。</p></blockquote><p>cookie 还可以限制::「时间范围」::，通过 Expires、Max-Age 中的一种。</p><blockquote><p>Expires属性指定一个具体的到期时间，到了指定时间以后，浏览器就不再保留这个 Cookie。它的值是 UTC 格式。如果不设置该属性，或者设为null，Cookie 只在当前会话（session）有效，浏览器窗口一旦关闭，当前 Session 结束，该 Cookie 就会被删除。另外，浏览器根据本地时间，决定 Cookie 是否过期，由于本地时间是不精确的，所以没有办法保证 Cookie 一定会在服务器指定的时间过期。Max-Age属性指定从现在开始 Cookie 存在的秒数，比如60 * 60 * 24 * 365（即一年）。过了这个时间以后，浏览器就不再保留这个 Cookie。如果同时指定了Expires和Max-Age，那么Max-Age的值将优先生效。如果Set-Cookie字段没有指定Expires或Max-Age属性，那么这个 Cookie 就是 Session Cookie，即它只在本次对话存在，一旦用户关闭浏览器，浏览器就不会再保留这个 Cookie。<a href="http://javascript.ruanyifeng.com/bom/cookie">—— Cookie — JavaScript 标准参考教程（alpha）</a></p></blockquote></li><li><p>Secure &#x2F; HttpOnly</p><blockquote><p>有的学校规定，不带卡套不让刷（什么奇葩学校，假设）；有的学校不让自己给卡贴贴纸。</p></blockquote><p>cookie 可以限制::「使用方式」::。</p><blockquote><p>Secure属性指定浏览器只有在加密协议 HTTPS 下，才能将这个 Cookie 发送到服务器。另一方面，如果当前协议是 HTTP，浏览器会自动忽略服务器发来的Secure属性。该属性只是一个开关，不需要指定值。如果通信是 HTTPS 协议，该开关自动打开。HttpOnly属性指定该 Cookie 无法通过 JavaScript 脚本拿到，主要是Document.cookie属性、XMLHttpRequest对象和 Request API 都拿不到该属性。这样就防止了该 Cookie 被脚本读到，只有浏览器发出 HTTP 请求时，才会带上该 Cookie。<a href="http://javascript.ruanyifeng.com/bom/cookie">—— Cookie — JavaScript 标准参考教程（alpha）</a></p></blockquote></li></ol><h2 id="session"><a href="#session" class="headerlink" title="session"></a>session</h2><blockquote><p>Session是另一种记录客户状态的机制，不同的是<strong>Cookie保存在客户端浏览器</strong>中，而<strong>Session保存在服务器</strong>上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。所以<strong>cookie不如session安全</strong>；<br>session基于cookie，不能在客户端设置，只能在服务端设置；</p></blockquote><h2 id="cookie和session缺点"><a href="#cookie和session缺点" class="headerlink" title="cookie和session缺点"></a>cookie和session缺点</h2><ul><li>Cookie会被附加在每个HTTP请求中，所以无形中增加了流量（事实上某些请求是不需要的）；</li><li>Cookie是明文传递的，所以存在安全性的问题；</li><li>Cookie的大小限制是4KB，对于复杂的需求来说是不够的；</li><li>对于浏览器外的其他客户端（比如iOS、Android），必须手动的设置cookie和session；(浏览器自动就带上了)</li><li>对于分布式系统和服务器集群中如何可以保证其他系统也可以正确的解析session？</li></ul><h2 id="Token"><a href="#Token" class="headerlink" title="Token"></a>Token</h2><h3 id="Token是什么"><a href="#Token是什么" class="headerlink" title="Token是什么?"></a>Token是什么?</h3><blockquote><p>在目前的前后端分离的开发过程中，使用token来进行身份验证的是最多的情况。</p></blockquote><ul><li>token可以翻译为令牌；</li><li>也就是在验证了用户账号和密码正确的情况，给用户颁发一个令牌；</li><li>这个令牌作为后续用户访问一些接口或者资源的凭证；</li><li>我们可以根据这个凭证来判断用户是否有权限来访问；</li></ul><blockquote><p>所以token的使用应该分成两个重要的步骤：</p></blockquote><ul><li>生成token：登录的时候，颁发token；</li><li>验证token：访问某些资源或者接口时，验证token；</li></ul><h3 id="JWT实现Token机制"><a href="#JWT实现Token机制" class="headerlink" title="JWT实现Token机制"></a>JWT实现Token机制</h3><blockquote><p>JWT生成的Token由三部分组成：</p></blockquote><ol><li>header</li><li>payload</li><li>signature</li></ol><ul><li>header<ul><li>alg：采用的加密算法，默认是 HMAC SHA256（HS256），采用同一个密钥进行 加密和解密；(对称加密)</li><li>typ：JWT，固定值，通常都写成JWT即可；</li><li>会通过base64Url算法进行编码；</li></ul></li><li>payload<ul><li>携带的数据，比如我们可以将用户的id和name放到payload中；</li><li>默认也会携带iat（issued at），令牌的签发时间；</li><li>我们也可以设置过期时间：exp（expiration time）；</li><li>会通过base64Url算法进行编码；</li></ul></li><li>signature<ul><li>设置一个secretKey，通过将前两个的结果合并后进行HMACSHA256的算法；</li><li>HMACSHA256(base64Url(header)+.+base64Url(payload), secretKey);</li><li>但是如果secretKey暴露是一件非常危险的事情，因为之后就可以模拟颁发token， 也可以解密token；(因为SHA256是对称加密，就一个秘钥；采用非对称加密更安全)；</li></ul></li></ul><blockquote><p>即：header生成一个字符串，payload生成一个字符串，signature将前面两个结合在加密生成一个字符串，中间都用点连接：</p><p>即：<code>token：header.payload.signature</code></p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/token1673523132958.png" alt="token"></p><h3 id="Koa颁发与验证Token"><a href="#Koa颁发与验证Token" class="headerlink" title="Koa颁发与验证Token"></a>Koa颁发与验证Token</h3><ol><li>安装Koa</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm init -y</span><br><span class="line">npm install koa koa-router</span><br></pre></td></tr></table></figure><ol start="2"><li>安装JWT库：<code>jsonwebtoken</code></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i jsonwebtoken</span><br></pre></td></tr></table></figure><ol start="3"><li>引入jwt，调用<code>jwt.sign(用户信息,秘钥,&#123;过期时间:xx秒&#125;)</code>方法获取<code>token</code>；</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 引入jwt</span></span><br><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"><span class="keyword">const</span> tokenRouter = <span class="keyword">new</span> <span class="title class_">Router</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 设置私钥</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">SECRECT_KEY</span> = <span class="string">&quot;abccba123&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 登录接口</span></span><br><span class="line">tokenRouter.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 3.</span></span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * 因为header部分没有用户数据,所以jwt默认给我们设置好了;</span></span><br><span class="line"><span class="comment">   * payload中的令牌的签发时间，jwt默认设置了,请求接口的时间为签发时间;</span></span><br><span class="line"><span class="comment">   * jwt.sign(用户信息,秘钥,&#123;过期时间:xx秒&#125;)</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="keyword">const</span> user = &#123; <span class="attr">id</span>: <span class="number">110</span>, <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span> &#125;;</span><br><span class="line">  <span class="keyword">const</span> token = jwt.<span class="title function_">sign</span>(user, <span class="variable constant_">SECRECT_KEY</span>, &#123;</span><br><span class="line">    <span class="attr">expiresIn</span>: <span class="number">10</span>,</span><br><span class="line">  &#125;);</span><br><span class="line">  ctx.<span class="property">body</span> = token;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 验证接口</span></span><br><span class="line">tokenRouter.<span class="title function_">get</span>(<span class="string">&quot;/verfify&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;&#125;);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`server is running port is 3000`</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><ol start="4"><li>使用<code>postman</code>验证</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/token21673524954972.png"></p><ol start="5"><li>获取<code>headers</code>中的<code>token</code>，通过<code>jwt.verify(token,key)</code>验证<code>token</code>是否正确&#x2F;过期；</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 引入jwt</span></span><br><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"><span class="keyword">const</span> tokenRouter = <span class="keyword">new</span> <span class="title class_">Router</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 设置私钥</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">SECRECT_KEY</span> = <span class="string">&quot;abccba123&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 登录接口</span></span><br><span class="line">tokenRouter.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 3.</span></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 因为header部分没有用户数据,所以jwt默认给我们设置好了;</span></span><br><span class="line"><span class="comment">     * payload中的令牌的签发时间，jwt默认设置了,请求接口的时间为签发时间;</span></span><br><span class="line"><span class="comment">     * jwt.sign(用户信息,秘钥,&#123;过期时间:xx秒&#125;)</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">const</span> user = &#123;</span><br><span class="line">        <span class="attr">id</span>: <span class="number">110</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">const</span> token = jwt.<span class="title function_">sign</span>(user, <span class="variable constant_">SECRECT_KEY</span>, &#123;</span><br><span class="line">        <span class="attr">expiresIn</span>: <span class="number">10</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">    ctx.<span class="property">body</span> = token;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 验证接口</span></span><br><span class="line">tokenRouter.<span class="title function_">get</span>(<span class="string">&quot;/verfify&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 4.需要拿到授权的token</span></span><br><span class="line">    <span class="comment">// console.log(ctx.headers.authorization);</span></span><br><span class="line">    <span class="comment">// Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTEwLCJuYW1lIjoiZnNsbGFsYSIsImlhdCI6MTY3MzUyNDgwNiwiZXhwIjoxNjczNTI0ODE2fQ.EksolC0I72LPxH1lT3h-gm-cY10Q0eC2SaINKGCg77I</span></span><br><span class="line">    <span class="keyword">const</span> authorization = ctx.<span class="property">headers</span>.<span class="property">authorization</span>;</span><br><span class="line">    <span class="comment">// 5.此时的token多一个&quot;Bearer &quot;,去掉;</span></span><br><span class="line">    <span class="keyword">const</span> token = authorization.<span class="title function_">replace</span>(<span class="string">&quot;Bearer &quot;</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">    <span class="comment">// 6.认证token 通过 jwt.verify(token,key);</span></span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> result = jwt.<span class="title function_">verify</span>(token, <span class="variable constant_">SECRECT_KEY</span>);</span><br><span class="line">        ctx.<span class="property">body</span> = result;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        ctx.<span class="property">body</span>=<span class="string">&quot;无效的token~&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`server is running port is 3000`</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ol start="6"><li>使用<code>postman</code>验证</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/token61673526547688.png" alt="token"></p><blockquote><p>上面案例中，使用的是<code>SHA256</code>对称加密来颁发与验证签名；秘钥一旦泄露，就会很危险；即使不泄露，颁发和验证的秘钥是一样的，在我验证<code>token</code>的时候，我就可以颁发<code>token</code>，这样好多好多人都可以颁发<code>token</code>；</p></blockquote><h3 id="非对称加密"><a href="#非对称加密" class="headerlink" title="非对称加密"></a>非对称加密</h3><blockquote><p>使用<code>privateKey</code>进行加密(颁发)，使用<code>publicKey</code>进行解密(验证)；这样<code>publicKey</code>是不能进行颁发<code>token</code>的；这样会更安全；</p></blockquote><ul><li><p>前面我们说过，HS256加密算法一单密钥暴露就是非常危险的事情：</p><ul><li>比如在分布式系统中，每一个子系统都需要获取到密钥；</li><li>那么拿到这个密钥后这个子系统既可以发布另外，也可以验证令牌；</li><li>但是对于一些资源服务器来说，它们只需要有验证令牌的能力就可以了；</li></ul></li><li><p>这个时候我们可以使用非对称加密，RS256：</p><ul><li>私钥（private key）：用于发布令牌；</li><li>公钥（public key）：用于验证令牌；</li></ul></li><li><p>我们可以使用openssl来生成一对私钥和公钥：</p><ul><li><p>通过私钥生成公钥；(因为需要用公钥来解析私钥)</p></li><li><p>Mac直接使用terminal终端即可；</p></li><li><p>Windows默认的cmd终端是不能直接使用的，建议直接使用git bash终端；</p></li></ul></li></ul><h4 id="生成私钥和公钥"><a href="#生成私钥和公钥" class="headerlink" title="生成私钥和公钥"></a>生成私钥和公钥</h4><ol><li>生成私钥</li></ol><figure class="highlight js"><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"><span class="comment">// 随便新建一个文件夹 git bash here</span></span><br><span class="line">openssl</span><br><span class="line">genrsa -out private.<span class="property">key</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/siyue1673528031903.png"></p><ol start="2"><li>根据私钥生成公钥</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">rsa -<span class="keyword">in</span> private.<span class="property">key</span> -pubout -out public.<span class="property">key</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/gongyue1673528315317.png"></p><h4 id="Koa颁发与验证Token-1"><a href="#Koa颁发与验证Token-1" class="headerlink" title="Koa颁发与验证Token"></a>Koa颁发与验证Token</h4><ol><li>读取上面生成的私钥与公钥，作为加密与解密的<code>key</code>；</li><li>这里不是默认的<code>SHA256</code>，所以加密和解密的时候我们要指定我们的加密算法；<code>(RS256)</code>；</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 引入jwt fs path</span></span><br><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"><span class="keyword">const</span> tokenRouter = <span class="keyword">new</span> <span class="title class_">Router</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 设置私钥</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PRIVATE_KEY</span> = fs.<span class="title function_">readFileSync</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;./keys/private.key&quot;</span>));</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PUBLIC_KEY</span> = fs.<span class="title function_">readFileSync</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;keys/public.key&quot;</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 登录接口</span></span><br><span class="line">tokenRouter.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> user = &#123;</span><br><span class="line">        <span class="attr">id</span>: <span class="number">110</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="comment">// 3.使用私钥加密,这里不是SHA256,所以我们要指定我们的加密算法;(RS256)</span></span><br><span class="line">    <span class="keyword">const</span> token = jwt.<span class="title function_">sign</span>(user, <span class="variable constant_">PRIVATE_KEY</span>, &#123;</span><br><span class="line">        <span class="attr">expiresIn</span>: <span class="number">10</span>,</span><br><span class="line">        <span class="attr">algorithm</span>: <span class="string">&quot;RS256&quot;</span></span><br><span class="line">    &#125;)</span><br><span class="line">    ctx.<span class="property">body</span> = token;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 验证接口</span></span><br><span class="line">tokenRouter.<span class="title function_">get</span>(<span class="string">&quot;/verfify&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 4.拿到授权的token</span></span><br><span class="line">    <span class="comment">// console.log(ctx.headers.authorization);</span></span><br><span class="line">    <span class="comment">// Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTEwLCJuYW1lIjoiZnNsbGFsYSIsImlhdCI6MTY3MzUyNDgwNiwiZXhwIjoxNjczNTI0ODE2fQ.EksolC0I72LPxH1lT3h-gm-cY10Q0eC2SaINKGCg77I</span></span><br><span class="line">    <span class="keyword">const</span> authorization = ctx.<span class="property">headers</span>.<span class="property">authorization</span>;</span><br><span class="line">    <span class="comment">// 5.此时的token多一个&quot;Bearer &quot;,去掉;</span></span><br><span class="line">    <span class="keyword">const</span> token = authorization.<span class="title function_">replace</span>(<span class="string">&quot;Bearer &quot;</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">    <span class="comment">// 6.认证token 通过 jwt.verify(token,key); 使用公钥进行解密,并告诉其加密算法;</span></span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> result = jwt.<span class="title function_">verify</span>(token, <span class="variable constant_">PUBLIC_KEY</span>, &#123;</span><br><span class="line">            <span class="attr">algorithms</span>: [<span class="string">&quot;RS256&quot;</span>] <span class="comment">//这里algorithms是个复数,所以需要传入数组;</span></span><br><span class="line">        &#125;);</span><br><span class="line">        ctx.<span class="property">body</span> = result;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        ctx.<span class="property">body</span> = <span class="string">&quot;无效的token~&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`server is running port is 3000`</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ol start="3"><li>使用<code>postman</code>验证</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/token71673529201209.png" alt="token"></p><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://blog.csdn.net/weixin_44247866/article/details/125628585">关于cookie</a></p><p><a href="https://blog.csdn.net/swadian2008/article/details/104267034">Cookie和Session详解</a></p><p><a href="https://mp.weixin.qq.com/s/rwp9sXi4Y8Ht0UbA6z4hSg">前端鉴权必须了解的 5 个兄弟：cookie、session、token、jwt、单点登录</a></p>]]></content>
+        <content type="html"><![CDATA[<h1 id="登录凭证"><a href="#登录凭证" class="headerlink" title="登录凭证"></a>登录凭证</h1><blockquote><p>登录成功返回凭证：<code>cookie+session</code>或者是<code>Token令牌</code>；现在基本都是<code>Token令牌</code>作为登录凭证；</p></blockquote><h2 id="为什么需要登录凭证呢？"><a href="#为什么需要登录凭证呢？" class="headerlink" title="为什么需要登录凭证呢？"></a>为什么需要登录凭证呢？</h2><blockquote><p>web开发中，我们使用最多的协议是<code>http</code>，但是<code>http</code>是一个<strong>无状态</strong>的协议。那什么叫做无状态协议呢？</p></blockquote><ul><li>举个例子：<ul><li>我们登录了一个网站 <a href="http://www.fsllala.top;/">www.fsllala.top；</a></li><li>登录的时候我们需要输入用户名和密码：比如用户名<code>forward</code>，密码：<code>Forward666</code>;</li><li>登录成功之后，我们要以<code>forward</code>的身份去访问其他的数据和资源，还是通过<code>http</code>请求去访问。<ul><li>fsllala的服务器会问：你谁呀？</li><li>forward说：我是forward呀，刚刚登录过呀；</li><li>fsllala：怎么证明你刚刚登录过呀？</li><li>forward说：这。。。，http没有告诉你吗？</li><li>fsllala：http的每次请求对我来说都是一个单独的请求，和之前请求过什么没有关系。</li></ul></li></ul></li></ul><p><img src="https://img.fsllala.top/1673224477117cookie.png" alt="cookie"></p><p><img src="https://img.fsllala.top/1673224528691cookie.png" alt="cookie"></p><blockquote><p>看到了吧？这就是http的无状态，也就是服务器不知道你上一步做了什么，我们必须得有一个办法可以证明我们登录过；</p></blockquote><ul><li>那如何证明刚才就是我登录的啊？<ul><li>登陆成功的时候服务器给我们发过来一个<strong>登录凭证</strong>，访问其他资源的时候，通过这个<strong>登录凭证</strong>来证明刚才就是我登录的，而且我能访问哪些资源，不能访问哪些资源，都可以通过<strong>登录凭证</strong>来决定；</li></ul></li></ul><p><img src="https://img.fsllala.top/1673224500212cookie.png" alt="cookie"></p><ul><li>目前登录凭证有两种：<ul><li><code>cookie+session</code>(逐渐淘汰)</li><li><code>Token</code>令牌</li></ul></li></ul><h2 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h2><ol><li>在提供标记的接口，通过 HTTP 返回头的 Set-Cookie 字段，直接「种」到浏览器上；</li><li>浏览器发起请求时，会<strong>自动</strong>把 cookie 通过 HTTP 请求头的 Cookie 字段，带给接口；</li></ol><h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><ol><li>Domain &#x2F; Path</li></ol><blockquote><p>你不能拿清华的校园卡进北大。</p></blockquote><p>​       cookie 是要限制::「空间范围」::的，通过 Domain（域）&#x2F; Path（路径）两级。</p><blockquote><p>Domain属性指定浏览器发出 HTTP 请求时，哪些域名要附带这个 Cookie。如果没有指定该属性，浏览器会默认将其设为当前 URL 的一级域名，比如 <a href="http://www.example.com/">www.example.com</a> 会设为 example.com，而且以后如果访问example.com的任何子域名，HTTP 请求也会带上这个 Cookie。如果服务器在Set-Cookie字段指定的域名，不属于当前域名，浏览器会拒绝这个 Cookie。Path属性指定浏览器发出 HTTP 请求时，哪些路径要附带这个 Cookie。只要浏览器发现，Path属性是 HTTP 请求路径的开头一部分，就会在头信息里面带上这个 Cookie。比如，PATH属性是&#x2F;，那么请求&#x2F;docs路径也会包含该 Cookie。当然，前提是域名必须一致。<a href="http://javascript.ruanyifeng.com/bom/cookie">—— Cookie — JavaScript 标准参考教程（alpha）</a></p></blockquote><ol start="2"><li><p>Expires &#x2F; Max-Age</p><blockquote><p>你毕业了卡就不好使了。</p></blockquote><p>cookie 还可以限制::「时间范围」::，通过 Expires、Max-Age 中的一种。</p><blockquote><p>Expires属性指定一个具体的到期时间，到了指定时间以后，浏览器就不再保留这个 Cookie。它的值是 UTC 格式。如果不设置该属性，或者设为null，Cookie 只在当前会话（session）有效，浏览器窗口一旦关闭，当前 Session 结束，该 Cookie 就会被删除。另外，浏览器根据本地时间，决定 Cookie 是否过期，由于本地时间是不精确的，所以没有办法保证 Cookie 一定会在服务器指定的时间过期。Max-Age属性指定从现在开始 Cookie 存在的秒数，比如60 * 60 * 24 * 365（即一年）。过了这个时间以后，浏览器就不再保留这个 Cookie。如果同时指定了Expires和Max-Age，那么Max-Age的值将优先生效。如果Set-Cookie字段没有指定Expires或Max-Age属性，那么这个 Cookie 就是 Session Cookie，即它只在本次对话存在，一旦用户关闭浏览器，浏览器就不会再保留这个 Cookie。<a href="http://javascript.ruanyifeng.com/bom/cookie">—— Cookie — JavaScript 标准参考教程（alpha）</a></p></blockquote></li><li><p>Secure &#x2F; HttpOnly</p><blockquote><p>有的学校规定，不带卡套不让刷（什么奇葩学校，假设）；有的学校不让自己给卡贴贴纸。</p></blockquote><p>cookie 可以限制::「使用方式」::。</p><blockquote><p>Secure属性指定浏览器只有在加密协议 HTTPS 下，才能将这个 Cookie 发送到服务器。另一方面，如果当前协议是 HTTP，浏览器会自动忽略服务器发来的Secure属性。该属性只是一个开关，不需要指定值。如果通信是 HTTPS 协议，该开关自动打开。HttpOnly属性指定该 Cookie 无法通过 JavaScript 脚本拿到，主要是Document.cookie属性、XMLHttpRequest对象和 Request API 都拿不到该属性。这样就防止了该 Cookie 被脚本读到，只有浏览器发出 HTTP 请求时，才会带上该 Cookie。<a href="http://javascript.ruanyifeng.com/bom/cookie">—— Cookie — JavaScript 标准参考教程（alpha）</a></p></blockquote></li></ol><h2 id="session"><a href="#session" class="headerlink" title="session"></a>session</h2><blockquote><p>Session是另一种记录客户状态的机制，不同的是<strong>Cookie保存在客户端浏览器</strong>中，而<strong>Session保存在服务器</strong>上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。所以<strong>cookie不如session安全</strong>；<br>session基于cookie，不能在客户端设置，只能在服务端设置；</p></blockquote><h2 id="cookie和session缺点"><a href="#cookie和session缺点" class="headerlink" title="cookie和session缺点"></a>cookie和session缺点</h2><ul><li>Cookie会被附加在每个HTTP请求中，所以无形中增加了流量（事实上某些请求是不需要的）；</li><li>Cookie是明文传递的，所以存在安全性的问题；</li><li>Cookie的大小限制是4KB，对于复杂的需求来说是不够的；</li><li>对于浏览器外的其他客户端（比如iOS、Android），必须手动的设置cookie和session；(浏览器自动就带上了)</li><li>对于分布式系统和服务器集群中如何可以保证其他系统也可以正确的解析session？</li></ul><h2 id="Token"><a href="#Token" class="headerlink" title="Token"></a>Token</h2><h3 id="Token是什么"><a href="#Token是什么" class="headerlink" title="Token是什么?"></a>Token是什么?</h3><blockquote><p>在目前的前后端分离的开发过程中，使用token来进行身份验证的是最多的情况。</p></blockquote><ul><li>token可以翻译为令牌；</li><li>也就是在验证了用户账号和密码正确的情况，给用户颁发一个令牌；</li><li>这个令牌作为后续用户访问一些接口或者资源的凭证；</li><li>我们可以根据这个凭证来判断用户是否有权限来访问；</li></ul><blockquote><p>所以token的使用应该分成两个重要的步骤：</p></blockquote><ul><li>生成token：登录的时候，颁发token；</li><li>验证token：访问某些资源或者接口时，验证token；</li></ul><h3 id="JWT实现Token机制"><a href="#JWT实现Token机制" class="headerlink" title="JWT实现Token机制"></a>JWT实现Token机制</h3><blockquote><p>JWT生成的Token由三部分组成：</p></blockquote><ol><li>header</li><li>payload</li><li>signature</li></ol><ul><li>header<ul><li>alg：采用的加密算法，默认是 HMAC SHA256（HS256），采用同一个密钥进行 加密和解密；(对称加密)</li><li>typ：JWT，固定值，通常都写成JWT即可；</li><li>会通过base64Url算法进行编码；</li></ul></li><li>payload<ul><li>携带的数据，比如我们可以将用户的id和name放到payload中；</li><li>默认也会携带iat（issued at），令牌的签发时间；</li><li>我们也可以设置过期时间：exp（expiration time）；</li><li>会通过base64Url算法进行编码；</li></ul></li><li>signature<ul><li>设置一个secretKey，通过将前两个的结果合并后进行HMACSHA256的算法；</li><li>HMACSHA256(base64Url(header)+.+base64Url(payload), secretKey);</li><li>但是如果secretKey暴露是一件非常危险的事情，因为之后就可以模拟颁发token， 也可以解密token；(因为SHA256是对称加密，就一个秘钥；采用非对称加密更安全)；</li></ul></li></ul><blockquote><p>即：header生成一个字符串，payload生成一个字符串，signature将前面两个结合在加密生成一个字符串，中间都用点连接：</p><p>即：<code>token：header.payload.signature</code></p></blockquote><p><img src="https://img.fsllala.top/token1673523132958.png" alt="token"></p><h3 id="Koa颁发与验证Token"><a href="#Koa颁发与验证Token" class="headerlink" title="Koa颁发与验证Token"></a>Koa颁发与验证Token</h3><ol><li>安装Koa</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm init -y</span><br><span class="line">npm install koa koa-router</span><br></pre></td></tr></table></figure><ol start="2"><li>安装JWT库：<code>jsonwebtoken</code></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i jsonwebtoken</span><br></pre></td></tr></table></figure><ol start="3"><li>引入jwt，调用<code>jwt.sign(用户信息,秘钥,&#123;过期时间:xx秒&#125;)</code>方法获取<code>token</code>；</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 引入jwt</span></span><br><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"><span class="keyword">const</span> tokenRouter = <span class="keyword">new</span> <span class="title class_">Router</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 设置私钥</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">SECRECT_KEY</span> = <span class="string">&quot;abccba123&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 登录接口</span></span><br><span class="line">tokenRouter.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 3.</span></span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * 因为header部分没有用户数据,所以jwt默认给我们设置好了;</span></span><br><span class="line"><span class="comment">   * payload中的令牌的签发时间，jwt默认设置了,请求接口的时间为签发时间;</span></span><br><span class="line"><span class="comment">   * jwt.sign(用户信息,秘钥,&#123;过期时间:xx秒&#125;)</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="keyword">const</span> user = &#123; <span class="attr">id</span>: <span class="number">110</span>, <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span> &#125;;</span><br><span class="line">  <span class="keyword">const</span> token = jwt.<span class="title function_">sign</span>(user, <span class="variable constant_">SECRECT_KEY</span>, &#123;</span><br><span class="line">    <span class="attr">expiresIn</span>: <span class="number">10</span>,</span><br><span class="line">  &#125;);</span><br><span class="line">  ctx.<span class="property">body</span> = token;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 验证接口</span></span><br><span class="line">tokenRouter.<span class="title function_">get</span>(<span class="string">&quot;/verfify&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;&#125;);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`server is running port is 3000`</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><ol start="4"><li>使用<code>postman</code>验证</li></ol><p><img src="https://img.fsllala.top/token21673524954972.png"></p><ol start="5"><li>获取<code>headers</code>中的<code>token</code>，通过<code>jwt.verify(token,key)</code>验证<code>token</code>是否正确&#x2F;过期；</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 引入jwt</span></span><br><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"><span class="keyword">const</span> tokenRouter = <span class="keyword">new</span> <span class="title class_">Router</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 设置私钥</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">SECRECT_KEY</span> = <span class="string">&quot;abccba123&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 登录接口</span></span><br><span class="line">tokenRouter.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 3.</span></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 因为header部分没有用户数据,所以jwt默认给我们设置好了;</span></span><br><span class="line"><span class="comment">     * payload中的令牌的签发时间，jwt默认设置了,请求接口的时间为签发时间;</span></span><br><span class="line"><span class="comment">     * jwt.sign(用户信息,秘钥,&#123;过期时间:xx秒&#125;)</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">const</span> user = &#123;</span><br><span class="line">        <span class="attr">id</span>: <span class="number">110</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">const</span> token = jwt.<span class="title function_">sign</span>(user, <span class="variable constant_">SECRECT_KEY</span>, &#123;</span><br><span class="line">        <span class="attr">expiresIn</span>: <span class="number">10</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">    ctx.<span class="property">body</span> = token;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 验证接口</span></span><br><span class="line">tokenRouter.<span class="title function_">get</span>(<span class="string">&quot;/verfify&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 4.需要拿到授权的token</span></span><br><span class="line">    <span class="comment">// console.log(ctx.headers.authorization);</span></span><br><span class="line">    <span class="comment">// Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTEwLCJuYW1lIjoiZnNsbGFsYSIsImlhdCI6MTY3MzUyNDgwNiwiZXhwIjoxNjczNTI0ODE2fQ.EksolC0I72LPxH1lT3h-gm-cY10Q0eC2SaINKGCg77I</span></span><br><span class="line">    <span class="keyword">const</span> authorization = ctx.<span class="property">headers</span>.<span class="property">authorization</span>;</span><br><span class="line">    <span class="comment">// 5.此时的token多一个&quot;Bearer &quot;,去掉;</span></span><br><span class="line">    <span class="keyword">const</span> token = authorization.<span class="title function_">replace</span>(<span class="string">&quot;Bearer &quot;</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">    <span class="comment">// 6.认证token 通过 jwt.verify(token,key);</span></span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> result = jwt.<span class="title function_">verify</span>(token, <span class="variable constant_">SECRECT_KEY</span>);</span><br><span class="line">        ctx.<span class="property">body</span> = result;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        ctx.<span class="property">body</span>=<span class="string">&quot;无效的token~&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`server is running port is 3000`</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ol start="6"><li>使用<code>postman</code>验证</li></ol><p><img src="https://img.fsllala.top/token61673526547688.png" alt="token"></p><blockquote><p>上面案例中，使用的是<code>SHA256</code>对称加密来颁发与验证签名；秘钥一旦泄露，就会很危险；即使不泄露，颁发和验证的秘钥是一样的，在我验证<code>token</code>的时候，我就可以颁发<code>token</code>，这样好多好多人都可以颁发<code>token</code>；</p></blockquote><h3 id="非对称加密"><a href="#非对称加密" class="headerlink" title="非对称加密"></a>非对称加密</h3><blockquote><p>使用<code>privateKey</code>进行加密(颁发)，使用<code>publicKey</code>进行解密(验证)；这样<code>publicKey</code>是不能进行颁发<code>token</code>的；这样会更安全；</p></blockquote><ul><li><p>前面我们说过，HS256加密算法一单密钥暴露就是非常危险的事情：</p><ul><li>比如在分布式系统中，每一个子系统都需要获取到密钥；</li><li>那么拿到这个密钥后这个子系统既可以发布另外，也可以验证令牌；</li><li>但是对于一些资源服务器来说，它们只需要有验证令牌的能力就可以了；</li></ul></li><li><p>这个时候我们可以使用非对称加密，RS256：</p><ul><li>私钥（private key）：用于发布令牌；</li><li>公钥（public key）：用于验证令牌；</li></ul></li><li><p>我们可以使用openssl来生成一对私钥和公钥：</p><ul><li><p>通过私钥生成公钥；(因为需要用公钥来解析私钥)</p></li><li><p>Mac直接使用terminal终端即可；</p></li><li><p>Windows默认的cmd终端是不能直接使用的，建议直接使用git bash终端；</p></li></ul></li></ul><h4 id="生成私钥和公钥"><a href="#生成私钥和公钥" class="headerlink" title="生成私钥和公钥"></a>生成私钥和公钥</h4><ol><li>生成私钥</li></ol><figure class="highlight js"><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"><span class="comment">// 随便新建一个文件夹 git bash here</span></span><br><span class="line">openssl</span><br><span class="line">genrsa -out private.<span class="property">key</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/siyue1673528031903.png"></p><ol start="2"><li>根据私钥生成公钥</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">rsa -<span class="keyword">in</span> private.<span class="property">key</span> -pubout -out public.<span class="property">key</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/gongyue1673528315317.png"></p><h4 id="Koa颁发与验证Token-1"><a href="#Koa颁发与验证Token-1" class="headerlink" title="Koa颁发与验证Token"></a>Koa颁发与验证Token</h4><ol><li>读取上面生成的私钥与公钥，作为加密与解密的<code>key</code>；</li><li>这里不是默认的<code>SHA256</code>，所以加密和解密的时候我们要指定我们的加密算法；<code>(RS256)</code>；</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Koa</span> = <span class="built_in">require</span>(<span class="string">&quot;koa&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Router</span> = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 引入jwt fs path</span></span><br><span class="line"><span class="keyword">const</span> jwt = <span class="built_in">require</span>(<span class="string">&quot;jsonwebtoken&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Koa</span>();</span><br><span class="line"><span class="keyword">const</span> tokenRouter = <span class="keyword">new</span> <span class="title class_">Router</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 设置私钥</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PRIVATE_KEY</span> = fs.<span class="title function_">readFileSync</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;./keys/private.key&quot;</span>));</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">PUBLIC_KEY</span> = fs.<span class="title function_">readFileSync</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;keys/public.key&quot;</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 登录接口</span></span><br><span class="line">tokenRouter.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> user = &#123;</span><br><span class="line">        <span class="attr">id</span>: <span class="number">110</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="comment">// 3.使用私钥加密,这里不是SHA256,所以我们要指定我们的加密算法;(RS256)</span></span><br><span class="line">    <span class="keyword">const</span> token = jwt.<span class="title function_">sign</span>(user, <span class="variable constant_">PRIVATE_KEY</span>, &#123;</span><br><span class="line">        <span class="attr">expiresIn</span>: <span class="number">10</span>,</span><br><span class="line">        <span class="attr">algorithm</span>: <span class="string">&quot;RS256&quot;</span></span><br><span class="line">    &#125;)</span><br><span class="line">    ctx.<span class="property">body</span> = token;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 验证接口</span></span><br><span class="line">tokenRouter.<span class="title function_">get</span>(<span class="string">&quot;/verfify&quot;</span>, <span class="function">(<span class="params">ctx, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 4.拿到授权的token</span></span><br><span class="line">    <span class="comment">// console.log(ctx.headers.authorization);</span></span><br><span class="line">    <span class="comment">// Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTEwLCJuYW1lIjoiZnNsbGFsYSIsImlhdCI6MTY3MzUyNDgwNiwiZXhwIjoxNjczNTI0ODE2fQ.EksolC0I72LPxH1lT3h-gm-cY10Q0eC2SaINKGCg77I</span></span><br><span class="line">    <span class="keyword">const</span> authorization = ctx.<span class="property">headers</span>.<span class="property">authorization</span>;</span><br><span class="line">    <span class="comment">// 5.此时的token多一个&quot;Bearer &quot;,去掉;</span></span><br><span class="line">    <span class="keyword">const</span> token = authorization.<span class="title function_">replace</span>(<span class="string">&quot;Bearer &quot;</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">    <span class="comment">// 6.认证token 通过 jwt.verify(token,key); 使用公钥进行解密,并告诉其加密算法;</span></span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> result = jwt.<span class="title function_">verify</span>(token, <span class="variable constant_">PUBLIC_KEY</span>, &#123;</span><br><span class="line">            <span class="attr">algorithms</span>: [<span class="string">&quot;RS256&quot;</span>] <span class="comment">//这里algorithms是个复数,所以需要传入数组;</span></span><br><span class="line">        &#125;);</span><br><span class="line">        ctx.<span class="property">body</span> = result;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        ctx.<span class="property">body</span> = <span class="string">&quot;无效的token~&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">routes</span>());</span><br><span class="line">app.<span class="title function_">use</span>(tokenRouter.<span class="title function_">allowedMethods</span>());</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`server is running port is 3000`</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ol start="3"><li>使用<code>postman</code>验证</li></ol><p><img src="https://img.fsllala.top/token71673529201209.png" alt="token"></p><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://blog.csdn.net/weixin_44247866/article/details/125628585">关于cookie</a></p><p><a href="https://blog.csdn.net/swadian2008/article/details/104267034">Cookie和Session详解</a></p><p><a href="https://mp.weixin.qq.com/s/rwp9sXi4Y8Ht0UbA6z4hSg">前端鉴权必须了解的 5 个兄弟：cookie、session、token、jwt、单点登录</a></p>]]></content>
       
       
       <categories>
@@ -189,7 +189,7 @@
       <link href="/articles/46635768.html"/>
       <url>/articles/46635768.html</url>
       
-        <content type="html"><![CDATA[<h1 id="NodeJs连接MySQL"><a href="#NodeJs连接MySQL" class="headerlink" title="NodeJs连接MySQL"></a>NodeJs连接MySQL</h1><h2 id="mysql与mysql2"><a href="#mysql与mysql2" class="headerlink" title="mysql与mysql2"></a>mysql与mysql2</h2><ul><li>如何可以在Node的代码中执行SQL语句呢?这里我们可以借助于两个库：<ul><li>mysql：最早的Node连接MySQL的数据库驱动；</li><li>mysql2：在mysql的基础之上，进行了很多的优化、改进；</li></ul></li><li>目前相对来说，更偏向于使用mysql2，mysql2兼容mysql的API，并且提供了一些附加功能；<ul><li>更快&#x2F;更好的性能；</li><li>Prepared Statement (预编译语句)：<ul><li>提高性能：将创建的语句模块发送给MySQL，然后MySQL编译（解析、优化、转换）语句模块，并且存储它但是不执行，之 后我们在真正执行时会给?提供实际的参数才会执行；就算多次执行，也只会编译一次，所以性能是更高的；</li><li>防止SQL注入：之后传入的值不会像模块引擎那样就编译，那么一些SQL注入的内容不会被执行；or 1 &#x3D; 1不会被执行；</li></ul></li><li>支持Promise，所以我们可以使用async和await语法；</li></ul></li></ul><h2 id="mysql2的使用"><a href="#mysql2的使用" class="headerlink" title="mysql2的使用"></a>mysql2的使用</h2><ol><li>安装mysql2：</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm init -y</span><br><span class="line">npm install mysql2</span><br></pre></td></tr></table></figure><ol start="2"><li>mysql2的使用过程如下：<ul><li>第一步：创建连接（通过createConnection），并且获取连接对象；</li><li>第二步：执行SQL语句即可（通过query）；</li></ul></li></ol><h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&quot;mysql2&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.创建数据库链接</span></span><br><span class="line"><span class="keyword">const</span> connection =mysql.<span class="title function_">createConnection</span>(&#123;</span><br><span class="line">    <span class="attr">host</span>:<span class="string">&quot;localhost&quot;</span>,</span><br><span class="line">    <span class="attr">port</span>:<span class="number">3306</span>,</span><br><span class="line">    <span class="attr">database</span>:<span class="string">&quot;bili&quot;</span>,</span><br><span class="line">    <span class="attr">user</span>:<span class="string">&quot;root&quot;</span>,</span><br><span class="line">    <span class="attr">password</span>:<span class="string">&quot;123456&quot;</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.执行sql语句 使用query执行</span></span><br><span class="line"><span class="keyword">const</span> statement=<span class="string">`</span></span><br><span class="line"><span class="string">SELECT * FROM products where price&gt;6000</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">connection.<span class="title function_">query</span>(statement,<span class="function">(<span class="params">err,result,fields</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">//返回的是个数组对象;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="预处理语句（Prepared-Statement）"><a href="#预处理语句（Prepared-Statement）" class="headerlink" title="预处理语句（Prepared Statement）"></a>预处理语句（Prepared Statement）</h3><blockquote><p>如果再次执行该SQL语句，它将会从缓存中获取，省略了编译 statement 的时间来提高性能。</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&quot;mysql2&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.创建数据库链接</span></span><br><span class="line"><span class="keyword">const</span> connection = mysql.<span class="title function_">createConnection</span>(&#123;</span><br><span class="line">    <span class="attr">host</span>: <span class="string">&quot;localhost&quot;</span>,</span><br><span class="line">    <span class="attr">port</span>: <span class="number">3306</span>,</span><br><span class="line">    <span class="attr">database</span>: <span class="string">&quot;bili&quot;</span>,</span><br><span class="line">    <span class="attr">user</span>: <span class="string">&quot;root&quot;</span>,</span><br><span class="line">    <span class="attr">password</span>: <span class="string">&quot;123456&quot;</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.预处理语句   prepared</span></span><br><span class="line"><span class="comment">// 使用execute执行 (execute先执行了prepare 然后执行了 query)</span></span><br><span class="line"><span class="keyword">const</span> statement = <span class="string">`</span></span><br><span class="line"><span class="string">SELECT * FROM products where price&gt;? and score&gt;?</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">connection.<span class="title function_">execute</span>(statement, [<span class="number">6000</span>, <span class="number">7</span>], <span class="function">(<span class="params">err, result, fields</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(result);<span class="comment">//返回的是个数组对象;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="连接池（Connection-Pools）"><a href="#连接池（Connection-Pools）" class="headerlink" title="连接池（Connection Pools）"></a>连接池（Connection Pools）</h3><blockquote><p>前面我们是创建了一个连接（connection），但是如果我们有多个请求的话，该连接很有可能正在被占用，那么 我们是否需要每次一个请求都去创建一个新的连接呢？</p></blockquote><ul><li>事实上，mysql2给我们提供了连接池（connection pools）；</li><li>连接池可以在需要的时候自动创建连接，并且创建的连接不会被销毁，会放到连接池中，后续可以继续使用；</li><li>我们可以在创建连接池的时候设置LIMIT，也就是最大创建个数；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&quot;mysql2&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.创建连接池</span></span><br><span class="line"><span class="keyword">const</span> connections = mysql.<span class="title function_">createPool</span>(&#123;</span><br><span class="line">    <span class="attr">host</span>: <span class="string">&quot;localhost&quot;</span>,</span><br><span class="line">    <span class="attr">port</span>: <span class="number">3306</span>,</span><br><span class="line">    <span class="attr">database</span>: <span class="string">&quot;bili&quot;</span>,</span><br><span class="line">    <span class="attr">user</span>: <span class="string">&quot;root&quot;</span>,</span><br><span class="line">    <span class="attr">password</span>: <span class="string">&quot;123456&quot;</span>,</span><br><span class="line">    <span class="attr">connectionLimit</span>: <span class="number">10</span>, <span class="comment">//最多建立几个连接</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.使用连接池</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> statement = <span class="string">`</span></span><br><span class="line"><span class="string">SELECT * FROM products where price&gt;? and score&gt;?</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">connections.<span class="title function_">execute</span>(statement, [<span class="number">6000</span>, <span class="number">7</span>], <span class="function">(<span class="params">err, results</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(results);<span class="comment">//返回的是个数组对象;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>但是上面是通过<strong>回调函数</strong>来获取到的数据。回调函数容易产生<strong>回调地狱</strong>的问题；那如何解决呢？</p></blockquote><ul><li>连接池<code>connections</code>有<code>promise()</code>方法,可以直接调用;</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&quot;mysql2&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.创建连接池</span></span><br><span class="line"><span class="keyword">const</span> connections =mysql.<span class="title function_">createPool</span>(&#123;</span><br><span class="line">    <span class="attr">host</span>:<span class="string">&quot;localhost&quot;</span>,</span><br><span class="line">    <span class="attr">port</span>:<span class="number">3306</span>,</span><br><span class="line">    <span class="attr">database</span>:<span class="string">&quot;bili&quot;</span>,</span><br><span class="line">    <span class="attr">user</span>:<span class="string">&quot;root&quot;</span>,</span><br><span class="line">    <span class="attr">password</span>:<span class="string">&quot;123456&quot;</span>,</span><br><span class="line">    <span class="attr">connectionLimit</span>:<span class="number">10</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.使用连接池  connections有promise()方法,可以直接调用;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> statement=<span class="string">` </span></span><br><span class="line"><span class="string">SELECT * FROM products where price&gt;? and score&gt;?</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 回调函数形式;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// connections.execute(statement,[6000, 7],(err,results)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//     console.log(results);</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// connections有promise()方法,可以直接调用;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里.then中result是个数组是因为用到了数组解构,直接填result进去会得到一堆别的数据</span></span><br><span class="line">connections.<span class="title function_">promise</span>().<span class="title function_">execute</span>(statement,[<span class="number">6000</span>, <span class="number">7</span>]).<span class="title function_">then</span>(<span class="function">(<span class="params">[result]</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(result);<span class="comment">//返回的是个数组对象;</span></span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">err</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(err);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="SQL数据类型"><a href="#SQL数据类型" class="headerlink" title="SQL数据类型"></a>SQL数据类型</h2><h3 id="数字类型"><a href="#数字类型" class="headerlink" title="数字类型"></a>数字类型</h3><p>MySQL的数字类型有很多：</p><ul><li>整数数字类型：INTEGER，INT，SMALLINT，TINYINT，MEDIUMINT，BIGINT；</li><li>浮点数字类型：FLOAT，DOUBLE（FLOAT是4个字节，DOUBLE是8个字节）；</li><li>精确数字类型：DECIMAL，NUMERIC（DECIMAL是NUMERIC的实现形式）；</li></ul><h3 id="日期类型"><a href="#日期类型" class="headerlink" title="日期类型"></a>日期类型</h3><ul><li>YEAR以YYYY格式显示值；(范围 1901到2155，和 0000)；</li><li>DATE以格式YYYY-MM-DD显示值 ；（范围 ‘1000-01-01’ 到 ‘9999-12-31’）；</li><li>DATETIME以格式’YYYY-MM-DD hh:mm:ss’显示值；（支持的范围是1000-01-01 00:00:00到9999-12-31 23:59:59）；</li><li>TIMESTAMP以格式’YYYY-MM-DD hh:mm:ss’显示值；(但是它的范围是UTC的时间范围：’1970-01-01 00:00:01’到’2038-01-19 03:14:07’)；</li></ul><h3 id="字符串类型"><a href="#字符串类型" class="headerlink" title="字符串类型"></a>字符串类型</h3><ul><li>CHAR类型在创建表时为固定长度，长度可以是0到255之间的任何值；(在被查询时，会删除后面的空格)；</li><li>VARCHAR类型的值是可变长度的字符串，长度可以指定为0到65535之间的值；(在被查询时，不会删除后面的空格)；</li><li>TEXT用于存储大的字符串类型；</li><li>BLOB用于存储大的二进制类型；</li></ul><h2 id="SQL表约束"><a href="#SQL表约束" class="headerlink" title="SQL表约束"></a>SQL表约束</h2><h3 id="主键：PRIMARY-KEY"><a href="#主键：PRIMARY-KEY" class="headerlink" title="主键：PRIMARY KEY"></a>主键：PRIMARY KEY</h3><blockquote><p>一张表中，我们为了区分每一条记录的唯一性，必须有一个字段是永远不会重复，并且不会为空的，这个字段我们通常会将它设<br>置为主键。</p></blockquote><ul><li>主键是表中唯一的索引；</li><li>并且必须是NOT NULL的，如果没有设置 NOT NULL，那么MySQL也会隐式的设置为NOT NULL；</li><li>主键也可以是多列索引，PRIMARY KEY(key_part, …)，我们一般称之为联合主键；</li><li>建议：开发中主键字段应该是和业务无关的，尽量不要使用业务字段来作为主键(例如：id)；</li></ul><h3 id="唯一：UNIQUE"><a href="#唯一：UNIQUE" class="headerlink" title="唯一：UNIQUE"></a>唯一：UNIQUE</h3><blockquote><p>某些字段在开发中我们希望是唯一的，不会重复的，比如手机号码、身份证号码等，这个字段我们可以使用UNIQUE来约束。</p></blockquote><ul><li>允许NULL</li></ul><h3 id="不能为空：NOT-NULL"><a href="#不能为空：NOT-NULL" class="headerlink" title="不能为空：NOT NULL"></a>不能为空：NOT NULL</h3><blockquote><p>某些字段我们要求用户必须插入值，不可以为空，这个时候我们可以使用 NOT NULL 来约束；</p></blockquote><h3 id="默认值：DEFAULT"><a href="#默认值：DEFAULT" class="headerlink" title="默认值：DEFAULT"></a>默认值：DEFAULT</h3><blockquote><p>某些字段我们希望在没有设置值时给予一个默认值，这个时候我们可以使用 DEFAULT来完成；</p></blockquote><h3 id="自动递增：AUTO-INCREMENT"><a href="#自动递增：AUTO-INCREMENT" class="headerlink" title="自动递增：AUTO_INCREMENT"></a>自动递增：AUTO_INCREMENT</h3><blockquote><p>某些字段我们希望不设置值时可以进行递增，比如用户的id，这个时候可以使用AUTO_INCREMENT来完成；</p></blockquote><h2 id="常用SQL语句"><a href="#常用SQL语句" class="headerlink" title="常用SQL语句"></a>常用SQL语句</h2><h3 id="单表"><a href="#单表" class="headerlink" title="单表"></a>单表</h3><h4 id="查询"><a href="#查询" class="headerlink" title="查询"></a>查询</h4><h5 id="基础查询"><a href="#基础查询" class="headerlink" title="基础查询"></a>基础查询</h5><ul><li>查询所有字段和所有数据;<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li><li>查询指定字段和所有数据;<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> id,title,price <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li><li>对字段结果起别名(as可以省略不写)<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> id,title <span class="keyword">as</span> phoneTitle,price <span class="keyword">as</span> currentPrice <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li></ul><h5 id="where查询"><a href="#where查询" class="headerlink" title="where查询"></a>where查询</h5><ul><li>查询价格小于1000的手机<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> price<span class="operator">&lt;</span><span class="number">1000</span>;</span><br></pre></td></tr></table></figure></li><li>查询价格等于999的手机 (SQL是一个&#x3D;，和JS别搞混了)<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> price<span class="operator">=</span><span class="number">999</span>;</span><br></pre></td></tr></table></figure></li><li>查询价格不等于999的手机 <figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> price<span class="operator">!=</span><span class="number">999</span>;</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> price<span class="operator">&lt;&gt;</span><span class="number">999</span>;</span><br></pre></td></tr></table></figure></li><li>查询品牌是华为，并且小于2000元的手机<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> `brand` <span class="operator">=</span> <span class="string">&#x27;华为&#x27;</span> <span class="operator">&amp;&amp;</span> `price` <span class="operator">&lt;</span> <span class="number">2000</span>;</span><br></pre></td></tr></table></figure></li><li>查询所有的华为手机或者价格小于1000的手机<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> `brand` <span class="operator">=</span> <span class="string">&#x27;华为&#x27;</span> <span class="operator">||</span> `price` <span class="operator">&lt;</span> <span class="number">1000</span>;</span><br></pre></td></tr></table></figure></li></ul><h5 id="NULL"><a href="#NULL" class="headerlink" title="NULL"></a>NULL</h5><ul><li><p>将id 85-88的url设置为NULL</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">UPDATE</span> `products` <span class="keyword">SET</span> url<span class="operator">=</span><span class="keyword">NULL</span> <span class="keyword">WHERE</span> id<span class="operator">&gt;=</span><span class="number">85</span><span class="operator">&amp;&amp;</span>id<span class="operator">&lt;=</span><span class="number">88</span>;</span><br></pre></td></tr></table></figure></li><li><p>查询某个值为NULL  用 IS 不能用 &#x3D;</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> url <span class="keyword">IS</span> <span class="keyword">NULL</span>;</span><br></pre></td></tr></table></figure></li><li><p>查询某个值不为NULL </p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> url <span class="keyword">IS</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>;</span><br></pre></td></tr></table></figure></li></ul><h5 id="模糊查询"><a href="#模糊查询" class="headerlink" title="模糊查询"></a>模糊查询</h5><ul><li><p>查询所有以v开头的title</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> title <span class="keyword">LIKE</span> <span class="string">&#x27;v%&#x27;</span>;</span><br></pre></td></tr></table></figure></li><li><p>查询带M的title</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> title <span class="keyword">LIKE</span> <span class="string">&#x27;%M%&#x27;</span>;</span><br></pre></td></tr></table></figure></li><li><p>查询带M的title必须是第三个字符</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> title <span class="keyword">LIKE</span> <span class="string">&#x27;__M%&#x27;</span>;</span><br></pre></td></tr></table></figure></li><li><p>IN表示取多个值中的其中一个即可 (取品牌为 华为、小米或苹果的)</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand <span class="operator">=</span>&quot;华为&quot;<span class="operator">||</span>brand<span class="operator">=</span>&quot;小米&quot;<span class="operator">||</span>brand<span class="operator">=</span>&quot;苹果&quot;;</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand <span class="keyword">IN</span>(&quot;华为&quot;,&quot;小米&quot;,&quot;苹果&quot;);</span><br></pre></td></tr></table></figure></li></ul><h5 id="排序"><a href="#排序" class="headerlink" title="排序"></a>排序</h5><blockquote><p>根据哪个字段进行怎么样的排序 ASC 升序  DESC 降序</p></blockquote><ul><li>根据价格的升序,价格一样时，根据评分降序,中间用逗号隔开;<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand <span class="keyword">IN</span>(&quot;华为&quot;,&quot;小米&quot;,&quot;苹果&quot;) <span class="keyword">ORDER</span> <span class="keyword">BY</span> price <span class="keyword">ASC</span>,score <span class="keyword">DESC</span>;</span><br></pre></td></tr></table></figure></li></ul><h5 id="分页查询"><a href="#分页查询" class="headerlink" title="分页查询"></a>分页查询</h5><ul><li><p>查询20条,偏移0条(1-20)</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` LIMIT <span class="number">20</span> <span class="keyword">OFFSET</span> <span class="number">0</span>;</span><br></pre></td></tr></table></figure><ul><li>查询20条,偏移20条(21-40)</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` LIMIT <span class="number">20</span> <span class="keyword">OFFSET</span> <span class="number">20</span>;</span><br></pre></td></tr></table></figure></li></ul><h5 id="聚合函数"><a href="#聚合函数" class="headerlink" title="聚合函数"></a>聚合函数</h5><blockquote><p>将表中所有数据看成一个整体；一个组；(例如：一个班)</p></blockquote><ul><li><p>求所有手机价格的总和,key改为 totalPrice;</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">SUM</span>(price) totalPrice <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li><li><p>求华为手机价格的总和,key改为 totalPrice;</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">SUM</span>(price) totalPrice <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand<span class="operator">=</span>&quot;华为&quot;;</span><br></pre></td></tr></table></figure></li><li><p>求华为手机平均价格</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">AVG</span>(price) <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand<span class="operator">=</span>&quot;华为&quot;;</span><br></pre></td></tr></table></figure></li><li><p>求最高手机价格和最低手机价格</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">MAX</span>(price) <span class="keyword">FROM</span> `products`;</span><br><span class="line"><span class="keyword">SELECT</span> <span class="built_in">MIN</span>(price) <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li><li><p>求华为手机个数</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(<span class="operator">*</span>) <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand<span class="operator">=</span>&quot;华为&quot;;</span><br></pre></td></tr></table></figure></li><li><p>求苹果手机存在url的个数 (url不为NULL)</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(url) <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand<span class="operator">=</span>&quot;苹果&quot;;</span><br></pre></td></tr></table></figure></li><li><p>求price不为null的个数</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(price) <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li><li><p>求 price 不为 null 的个数，并进行去重处理</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(<span class="keyword">DISTINCT</span> price) <span class="keyword">FROM</span> products;</span><br></pre></td></tr></table></figure></li></ul><h5 id="GROUP-BY"><a href="#GROUP-BY" class="headerlink" title="GROUP BY"></a>GROUP BY</h5><blockquote><p>GROUP BY通常和聚合函数一起使用 将数据分为多个组；(例如：一个班，通过某个条件进行分组)。</p></blockquote><ul><li><p>通过brand条件进行整体的分组，(一般来说，按照xxx进行整体的划分了，也需要根据xxx来进行查询，所以也会SELECT xxx)；</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> brand <span class="keyword">FROM</span> `products` <span class="keyword">GROUP</span> <span class="keyword">BY</span> brand;</span><br></pre></td></tr></table></figure></li><li><p>通过brand条件进行整体的分组，然后查询出分组之后的每组的平均价格，总数，平均分。</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> brand,<span class="built_in">AVG</span>(price),<span class="built_in">COUNT</span>(<span class="operator">*</span>),<span class="built_in">AVG</span>(score)<span class="keyword">FROM</span> `products` <span class="keyword">GROUP</span> <span class="keyword">BY</span> brand;</span><br></pre></td></tr></table></figure></li></ul><blockquote><p>通过 GROUP BY分组之后，再根据某个条件进行筛选，不能使用WHRER，要使用HAVING(HAVING是对分组之后的数据进行筛选的)</p><p>WHERE 不能放在 GROUP BY 之后；写在 GROUP BY 之前；</p></blockquote><ul><li>求平均价格avgPrice&gt;2000的手机，按照品牌进行分类，求出每个品牌的平均价格，总数，平均分；<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> brand,<span class="built_in">AVG</span>(price) avgPrice,<span class="built_in">COUNT</span>(<span class="operator">*</span>),<span class="built_in">AVG</span>(score)<span class="keyword">FROM</span> products <span class="keyword">GROUP</span> <span class="keyword">BY</span> brand <span class="keyword">HAVING</span> avgPrice<span class="operator">&gt;</span><span class="number">2000</span>;</span><br></pre></td></tr></table></figure></li></ul><h4 id="增加"><a href="#增加" class="headerlink" title="增加"></a>增加</h4><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `products` (`title`, `description`, `price`, `publishTime`) <span class="keyword">VALUES</span> (<span class="string">&#x27;iPhone&#x27;</span>, <span class="string">&#x27;iPhone12只要998&#x27;</span>, <span class="number">998.88</span>, <span class="string">&#x27;2020-10-10&#x27;</span>);</span><br></pre></td></tr></table></figure><h4 id="删除"><a href="#删除" class="headerlink" title="删除"></a>删除</h4><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">DELETE</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> `id` <span class="operator">=</span> <span class="number">2</span>;</span><br></pre></td></tr></table></figure><h4 id="修改"><a href="#修改" class="headerlink" title="修改"></a>修改</h4><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">UPDATE</span> `products` <span class="keyword">SET</span> `title` <span class="operator">=</span> <span class="string">&#x27;iPhone12&#x27;</span>, `price` <span class="operator">=</span> <span class="number">1299.88</span> <span class="keyword">WHERE</span> `id` <span class="operator">=</span> <span class="number">2</span>;</span><br></pre></td></tr></table></figure><h3 id="一对多表"><a href="#一对多表" class="headerlink" title="一对多表"></a>一对多表</h3><p>参考文献：<a href="https://blog.csdn.net/llg___/article/details/129739613">MySQL表设计思路</a>，<a href="https://blog.csdn.net/m0_67391120/article/details/123579207">数据库表关系详解（一对多、一对一、多对多）</a>；</p><ul><li>一对多，两张表，多的表加外键；</li><li>在”多”关系的表中去维护一个字段，这个字段是”一”关系的主键；</li><li>加外键约束，会保证数据业务上的一致性；</li></ul><blockquote><p>适用于重复数据的情景。</p><p>假设有 歌曲表，主歌手表；</p><p>一个主歌手可以有多个歌曲；但是反过来：一个歌曲，只能有一个主歌手。称之为一对多表；</p></blockquote><p>例如：一首音乐，有歌手，歌曲URL，歌曲时长等信息；然后歌手还有自己的详细信息，比如性别，籍贯，个人介绍等；这些信息都是重复的数据，如果都放在同一张表，会造成数据冗余。需要进行数据拆分：</p><ul><li>table1歌曲：id，歌曲URL，歌曲时长，歌手的id(第二张表的主键(外键约束))；</li><li>table2主歌手：id，性别，籍贯，个人介绍；</li><li>最后通过table1歌曲中singer_id与table2主歌手的id，将两张表关联起来；</li></ul><blockquote><p>但是table1歌曲中singer_id的值是随便填的嘛，答案肯定是不可以的，否则会发生混乱；需要限制其只能填写table2主歌手中已有的id值；</p><p>此时，table1歌曲的值，需要受限于table2主歌手的值，称之为外键约束。</p></blockquote><h4 id="外键约束"><a href="#外键约束" class="headerlink" title="外键约束"></a>外键约束</h4><blockquote><p>将两张表联系起来，我们可以将song中的singer_id关联到singer中的id。操作步骤见下文navicat–&gt;设置外键。</p></blockquote><h4 id="多表查询"><a href="#多表查询" class="headerlink" title="多表查询"></a>多表查询</h4><ul><li>笛卡尔乘积，表示为 X*Y(第一张表中每一个条数据，都会和第二张表中的每一条数据结合一次)</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="operator">/</span><span class="operator">/</span> 两个表名之间用 逗号 分开</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`,`singer`;</span><br></pre></td></tr></table></figure><ul><li>基础查询( 这个表示查询到笛卡尔乘积后的结果中，符合song.singer_id &#x3D; singer.id条件的数据过滤出来)</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`,`singer` <span class="keyword">WHERE</span> `song`.singer_id <span class="operator">=</span> `singer`.id</span><br></pre></td></tr></table></figure><h5 id="左连接"><a href="#左连接" class="headerlink" title="左连接"></a>左连接</h5><blockquote><p>如果我们希望获取到的是左边所有的数据（以左表为主）；</p><p>这个时候就表示无论左边的表是否有对应的singer_id的值对应右边表的id，左边的数据都会被查询出来；</p><p>这个也是开发中使用最多的情况，它的完整写法是LEFT [OUTER] JOIN，但是OUTER可以省略的；</p></blockquote><ul><li>左边的表数据都有，无论左边的表是否有对应的singer_id的值对应右边表的id，左边的数据都会被查询出来</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id</span><br></pre></td></tr></table></figure><ul><li>左边singer_id的值为NULL的(左边的表没有对应的singer_id的值对应右边表的id)</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id <span class="keyword">WHERE</span> singer_id <span class="keyword">IS</span> <span class="keyword">NULL</span>;</span><br></pre></td></tr></table></figure><h5 id="右连接"><a href="#右连接" class="headerlink" title="右连接"></a>右连接</h5><blockquote><p>如果我们希望获取到的是右边所有的数据（以右表为主）；</p><p>这个时候就表示无论左边的表是否有对应的singer_id的值对应右边表的id，右边的数据都会被查询出来；</p><p>不常用，它的完整写法是RIGHT [OUTER] JOIN，但是OUTER可以省略的</p></blockquote><ul><li>右边的表数据都有，无论左边的表是否有对应的singer_id的值对应右边表的id，右边的数据都会被查询出来</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">RIGHT</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id</span><br></pre></td></tr></table></figure><h5 id="内连接"><a href="#内连接" class="headerlink" title="内连接"></a>内连接</h5><blockquote><p>内连接和基础查询where效果是一样的，只不过是内部实现原理不一样；</p></blockquote><ul><li>内连接，代表的是在两张表连接时就会约束数据之间的关系，来决定之后查询的结果；（INNER可以省略）</li><li>where条件，代表的是先计算出笛卡尔乘积，在笛卡尔乘积的数据基础之上进行where条件的帅选；</li></ul><figure class="highlight sql"><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"><span class="operator">/</span><span class="operator">/</span> 以下两种方式的结果一样</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">INNER</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id; <span class="operator">/</span><span class="operator">/</span>内连接</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`,`singer` <span class="keyword">WHERE</span> `song`.singer_id <span class="operator">=</span> `singer`.id; <span class="operator">/</span><span class="operator">/</span> <span class="keyword">where</span>条件</span><br></pre></td></tr></table></figure><h5 id="全连接"><a href="#全连接" class="headerlink" title="全连接"></a>全连接</h5><blockquote><p>SQL规范中全连接是使用FULL JOIN，但是MySQL中并没有对它的支持，我们需要使用 UNION 来实现。</p><p>即：多张表中，所有的数据</p></blockquote><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id) <span class="keyword">UNION</span></span><br><span class="line">(<span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">RIGHT</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id)</span><br></pre></td></tr></table></figure><h5 id="JSON-OBJECT"><a href="#JSON-OBJECT" class="headerlink" title="JSON_OBJECT()"></a>JSON_OBJECT()</h5><blockquote><p>多表查询：将歌手信息放到一个单独的对象中。</p></blockquote><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line"> song.id <span class="keyword">as</span> id, song.name <span class="keyword">as</span> name,</span><br><span class="line"> <span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,singer.id,<span class="string">&#x27;intro&#x27;</span>,singer.introduce,<span class="string">&#x27;sex&#x27;</span>,singer.sex) <span class="keyword">as</span> singerInfo</span><br><span class="line"> <span class="keyword">FROM</span> `song` <span class="keyword">JOIN</span> `singer` <span class="keyword">ON</span> `song`.singer_id<span class="operator">=</span>`singer`.id;</span><br><span class="line"> </span><br><span class="line"> <span class="comment">/** 结果为：</span></span><br><span class="line"><span class="comment">  &#123;</span></span><br><span class="line"><span class="comment">   id: 1,</span></span><br><span class="line"><span class="comment">   name: &quot;fsllala&quot;,</span></span><br><span class="line"><span class="comment">   singerInfo: &#123; id: 1, sex: 1, intro: &quot;前端小菜鸡&quot; &#125;,</span></span><br><span class="line"><span class="comment">  &#125;</span></span><br><span class="line"><span class="comment"> *</span></span><br></pre></td></tr></table></figure><h3 id="多对多表"><a href="#多对多表" class="headerlink" title="多对多表"></a>多对多表</h3><ul><li>多对多，三张表，关系表加外键；</li><li>添加数据时，先添加父表记录(student，course)，再添加子表(student_course_relation)记录；</li><li>删除数据时，先删除子表记录(student_course_relation),再删除父表记录(student，course)；</li></ul><blockquote><p>假设有 学生表，课程表；</p><p>一个学生可以对应多个课程；反过来：一个课程，可以对应多个学生；称之为：多对多表。</p><p>此时添加数据比较麻烦，需要一个关系表，来进行表的关联</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/sql_moreToMore.png"></p><ol><li>创建两张表：学生表，课程表</li></ol><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"># 创建学生表</span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `students`(</span><br><span class="line">id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line">name <span class="type">VARCHAR</span>(<span class="number">20</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line">age <span class="type">INT</span></span><br><span class="line">);</span><br><span class="line"># 创建课程表</span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `courses`(</span><br><span class="line">id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line">name <span class="type">VARCHAR</span>(<span class="number">20</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line">price <span class="keyword">DOUBLE</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span></span><br><span class="line">);</span><br></pre></td></tr></table></figure><ol start="2"><li>分别插入一些数据</li></ol><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students` (name, age) <span class="keyword">VALUES</span>(<span class="string">&#x27;why&#x27;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students` (name, age) <span class="keyword">VALUES</span>(<span class="string">&#x27;tom&#x27;</span>, <span class="number">22</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students` (name, age) <span class="keyword">VALUES</span>(<span class="string">&#x27;lilei&#x27;</span>, <span class="number">25</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students` (name, age) <span class="keyword">VALUES</span>(<span class="string">&#x27;lucy&#x27;</span>, <span class="number">16</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students` (name, age) <span class="keyword">VALUES</span>(<span class="string">&#x27;lily&#x27;</span>, <span class="number">20</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `courses` (name, price) <span class="keyword">VALUES</span> (<span class="string">&#x27;英语&#x27;</span>, <span class="number">100</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `courses` (name, price) <span class="keyword">VALUES</span> (<span class="string">&#x27;语文&#x27;</span>, <span class="number">666</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `courses` (name, price) <span class="keyword">VALUES</span> (<span class="string">&#x27;数学&#x27;</span>, <span class="number">888</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `courses` (name, price) <span class="keyword">VALUES</span> (<span class="string">&#x27;历史&#x27;</span>, <span class="number">80</span>);</span><br></pre></td></tr></table></figure><ol start="3"><li>创建关系表</li></ol><blockquote><p>我们需要一个关系表来记录两张表中的数据关系</p></blockquote><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"># 创建关系表</span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `students_select_courses`(</span><br><span class="line">id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line">student_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line">course_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"><span class="keyword">FOREIGN</span> KEY (student_id) <span class="keyword">REFERENCES</span> students(id) <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE,</span><br><span class="line"><span class="keyword">FOREIGN</span> KEY (course_id) <span class="keyword">REFERENCES</span> courses(id) <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE</span><br><span class="line">);</span><br></pre></td></tr></table></figure><ol start="4"><li>向关系表中插入数据</li></ol><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"># why 选修了 英文和数学</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students_select_courses` (student_id, course_id) <span class="keyword">VALUES</span> (<span class="number">1</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students_select_courses` (student_id, course_id) <span class="keyword">VALUES</span> (<span class="number">1</span>, <span class="number">3</span>);</span><br><span class="line"># lilei选修了 语文和数学和历史</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students_select_courses` (student_id, course_id) <span class="keyword">VALUES</span> (<span class="number">3</span>, <span class="number">2</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students_select_courses` (student_id, course_id) <span class="keyword">VALUES</span> (<span class="number">3</span>, <span class="number">3</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students_select_courses` (student_id, course_id) <span class="keyword">VALUES</span> (<span class="number">3</span>, <span class="number">4</span>);</span><br></pre></td></tr></table></figure><ol start="5"><li>查询</li></ol><blockquote><p>查询多条数据</p></blockquote><figure class="highlight sql"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"># 查询所有的学生选择的所有课程</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">JOIN</span> `courses` cs </span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id; </span><br><span class="line"># 查询所有的学生选课情况</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `courses` cs </span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id;</span><br></pre></td></tr></table></figure><blockquote><p>查询单个学生的课程</p></blockquote><figure class="highlight sql"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"># why同学选择了哪些课程</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">JOIN</span> `courses` cs </span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id</span><br><span class="line"><span class="keyword">WHERE</span> stu.id <span class="operator">=</span> <span class="number">1</span>; </span><br><span class="line"># lily同学选择了哪些课程(注意，这里必须用左连接，事实上上面也应该使用的是左连接)</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `courses` cs </span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id</span><br><span class="line"><span class="keyword">WHERE</span> stu.id <span class="operator">=</span> <span class="number">5</span>;</span><br></pre></td></tr></table></figure><blockquote><p>查询哪些学生没有选择和哪些课程没有被选择：</p></blockquote><figure class="highlight sql"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"># 哪些学生是没有选课的</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `courses` cs</span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id</span><br><span class="line"><span class="keyword">WHERE</span> cs.id <span class="keyword">IS</span> <span class="keyword">NULL</span>;</span><br><span class="line"># 查询哪些课程没有被学生选择</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">RIGHT</span> <span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">RIGHT</span> <span class="keyword">JOIN</span> `courses` cs</span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id</span><br><span class="line"><span class="keyword">WHERE</span> stu.id <span class="keyword">IS</span> <span class="keyword">NULL</span>;</span><br></pre></td></tr></table></figure><h4 id="JSON-ARRAYAGG"><a href="#JSON-ARRAYAGG" class="headerlink" title="JSON_ARRAYAGG"></a>JSON_ARRAYAGG</h4><blockquote><p>多表查询：将课程信息放到一个单独的数组中，数组中又是对象类型；</p></blockquote><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span></span><br><span class="line"> stu.id <span class="keyword">as</span> id,stu.name <span class="keyword">as</span> name,</span><br><span class="line"> <span class="built_in">JSON_ARRAYAGG</span>(<span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,cs.id,<span class="string">&#x27;name&#x27;</span>,cs.name,<span class="string">&#x27;price&#x27;</span>,cs.price)) <span class="keyword">as</span> courseInfo</span><br><span class="line"><span class="keyword">FROM</span></span><br><span class="line">`students` <span class="keyword">as</span> stu</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `students_select_courses` <span class="keyword">as</span> ssc <span class="keyword">ON</span> stu.id<span class="operator">=</span>ssc.student_id</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `courses` <span class="keyword">as</span> cs <span class="keyword">ON</span>  ssc.course_id<span class="operator">=</span>cs.id</span><br><span class="line"><span class="keyword">WHERE</span></span><br><span class="line"> cs.id <span class="keyword">IS</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span></span><br><span class="line"> <span class="keyword">GROUP</span> <span class="keyword">BY</span></span><br><span class="line">  stu.id</span><br></pre></td></tr></table></figure><h2 id="navicat"><a href="#navicat" class="headerlink" title="navicat"></a>navicat</h2><h3 id="设置字段为自动更新时间列"><a href="#设置字段为自动更新时间列" class="headerlink" title="设置字段为自动更新时间列"></a>设置字段为自动更新时间列</h3><p><a href="https://blog.csdn.net/TangBoBoa/article/details/129958447?spm=1001.2014.3001.5506">参考文献</a></p><ul><li>选中列后在默认值写上<code>CURRENT_TIMESTAMP</code>，默认值下面的选项意思是当前列是否要在数据行内容更新时更新当前列时间；</li><li>createTime：默认值写上<code>CURRENT_TIMESTAMP</code>；默认值下面的选项不勾选；长度设置为(0-6)；</li><li>updateTime：默认值写上<code>CURRENT_TIMESTAMP</code>；默认值下面的选项勾选；长度设置为(0-6)；</li><li>长度可以传0-6的数字，表示时间的精度，比如 <code>CURRENT_TIMESTAMP(3)</code>表示精确到毫秒值；</li></ul><h3 id="设置唯一"><a href="#设置唯一" class="headerlink" title="设置唯一"></a>设置唯一</h3><p><a href="https://blog.csdn.net/Song_JiangTao/article/details/82192189?spm=1001.2014.3001.5506">参考文献</a></p><ol><li>右键–&gt;设计表</li><li>清楚你想要设计哪个字段为唯一的，例如我这里是设计name字段唯一，然后点击索引；</li><li>然后设置相关内容<ul><li>名：索引名</li><li>字段：想要设计的那个UNIQUE字段名，这里可以选择，也可以直接输入</li><li>索引类型：当然是选择UNIQUE啦</li><li>索引方法：可以不写；</li><li>注释：就是注释啦</li></ul></li></ol><h3 id="设置外键"><a href="#设置外键" class="headerlink" title="设置外键"></a>设置外键</h3><p><a href="https://blog.csdn.net/qq_43496316/article/details/103500093?spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-10-103500093-blog-129178444.235%5Ev38%5Epc_relevant_sort_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-10-103500093-blog-129178444.235%5Ev38%5Epc_relevant_sort_base3&utm_relevant_index=18">参考文献</a></p><ol><li>在table1中，右键–&gt;设计表–&gt;添加字段(singer_id)–&gt;保存–&gt;点击”外键”，然后进行如下配置；</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/mysql_outKey.png"></p><ol start="2"><li>删除&#x2F;更新时：</li></ol><ul><li><p>RESTRICT(默认属性)：当更新或删除某个记录时，会检查该记录是否有关联的外键记录，有的话会报错的，不允许更新或</p><p>删除；</p></li><li><p>NO ACTION：和RESTRICT是一致的，是在SQL标准中定义的；</p></li><li><p>CASCADE（级联）：当更新或删除某个记录时，会检查该记录是否有关联的外键记录，有的话：</p><ul><li>更新：那么会更新对应的记录；</li><li>删除：那么关联的记录会被一起删除掉；</li></ul></li><li><p>SET NULL：当更新或删除某个记录时，会检查该记录是否有关联的外键记录，有的话，将对应的值设置为NULL；</p></li></ul>]]></content>
+        <content type="html"><![CDATA[<h1 id="NodeJs连接MySQL"><a href="#NodeJs连接MySQL" class="headerlink" title="NodeJs连接MySQL"></a>NodeJs连接MySQL</h1><h2 id="mysql与mysql2"><a href="#mysql与mysql2" class="headerlink" title="mysql与mysql2"></a>mysql与mysql2</h2><ul><li>如何可以在Node的代码中执行SQL语句呢?这里我们可以借助于两个库：<ul><li>mysql：最早的Node连接MySQL的数据库驱动；</li><li>mysql2：在mysql的基础之上，进行了很多的优化、改进；</li></ul></li><li>目前相对来说，更偏向于使用mysql2，mysql2兼容mysql的API，并且提供了一些附加功能；<ul><li>更快&#x2F;更好的性能；</li><li>Prepared Statement (预编译语句)：<ul><li>提高性能：将创建的语句模块发送给MySQL，然后MySQL编译（解析、优化、转换）语句模块，并且存储它但是不执行，之 后我们在真正执行时会给?提供实际的参数才会执行；就算多次执行，也只会编译一次，所以性能是更高的；</li><li>防止SQL注入：之后传入的值不会像模块引擎那样就编译，那么一些SQL注入的内容不会被执行；or 1 &#x3D; 1不会被执行；</li></ul></li><li>支持Promise，所以我们可以使用async和await语法；</li></ul></li></ul><h2 id="mysql2的使用"><a href="#mysql2的使用" class="headerlink" title="mysql2的使用"></a>mysql2的使用</h2><ol><li>安装mysql2：</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm init -y</span><br><span class="line">npm install mysql2</span><br></pre></td></tr></table></figure><ol start="2"><li>mysql2的使用过程如下：<ul><li>第一步：创建连接（通过createConnection），并且获取连接对象；</li><li>第二步：执行SQL语句即可（通过query）；</li></ul></li></ol><h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&quot;mysql2&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.创建数据库链接</span></span><br><span class="line"><span class="keyword">const</span> connection =mysql.<span class="title function_">createConnection</span>(&#123;</span><br><span class="line">    <span class="attr">host</span>:<span class="string">&quot;localhost&quot;</span>,</span><br><span class="line">    <span class="attr">port</span>:<span class="number">3306</span>,</span><br><span class="line">    <span class="attr">database</span>:<span class="string">&quot;bili&quot;</span>,</span><br><span class="line">    <span class="attr">user</span>:<span class="string">&quot;root&quot;</span>,</span><br><span class="line">    <span class="attr">password</span>:<span class="string">&quot;123456&quot;</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.执行sql语句 使用query执行</span></span><br><span class="line"><span class="keyword">const</span> statement=<span class="string">`</span></span><br><span class="line"><span class="string">SELECT * FROM products where price&gt;6000</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">connection.<span class="title function_">query</span>(statement,<span class="function">(<span class="params">err,result,fields</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">//返回的是个数组对象;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="预处理语句（Prepared-Statement）"><a href="#预处理语句（Prepared-Statement）" class="headerlink" title="预处理语句（Prepared Statement）"></a>预处理语句（Prepared Statement）</h3><blockquote><p>如果再次执行该SQL语句，它将会从缓存中获取，省略了编译 statement 的时间来提高性能。</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&quot;mysql2&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.创建数据库链接</span></span><br><span class="line"><span class="keyword">const</span> connection = mysql.<span class="title function_">createConnection</span>(&#123;</span><br><span class="line">    <span class="attr">host</span>: <span class="string">&quot;localhost&quot;</span>,</span><br><span class="line">    <span class="attr">port</span>: <span class="number">3306</span>,</span><br><span class="line">    <span class="attr">database</span>: <span class="string">&quot;bili&quot;</span>,</span><br><span class="line">    <span class="attr">user</span>: <span class="string">&quot;root&quot;</span>,</span><br><span class="line">    <span class="attr">password</span>: <span class="string">&quot;123456&quot;</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.预处理语句   prepared</span></span><br><span class="line"><span class="comment">// 使用execute执行 (execute先执行了prepare 然后执行了 query)</span></span><br><span class="line"><span class="keyword">const</span> statement = <span class="string">`</span></span><br><span class="line"><span class="string">SELECT * FROM products where price&gt;? and score&gt;?</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">connection.<span class="title function_">execute</span>(statement, [<span class="number">6000</span>, <span class="number">7</span>], <span class="function">(<span class="params">err, result, fields</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(result);<span class="comment">//返回的是个数组对象;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="连接池（Connection-Pools）"><a href="#连接池（Connection-Pools）" class="headerlink" title="连接池（Connection Pools）"></a>连接池（Connection Pools）</h3><blockquote><p>前面我们是创建了一个连接（connection），但是如果我们有多个请求的话，该连接很有可能正在被占用，那么 我们是否需要每次一个请求都去创建一个新的连接呢？</p></blockquote><ul><li>事实上，mysql2给我们提供了连接池（connection pools）；</li><li>连接池可以在需要的时候自动创建连接，并且创建的连接不会被销毁，会放到连接池中，后续可以继续使用；</li><li>我们可以在创建连接池的时候设置LIMIT，也就是最大创建个数；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&quot;mysql2&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.创建连接池</span></span><br><span class="line"><span class="keyword">const</span> connections = mysql.<span class="title function_">createPool</span>(&#123;</span><br><span class="line">    <span class="attr">host</span>: <span class="string">&quot;localhost&quot;</span>,</span><br><span class="line">    <span class="attr">port</span>: <span class="number">3306</span>,</span><br><span class="line">    <span class="attr">database</span>: <span class="string">&quot;bili&quot;</span>,</span><br><span class="line">    <span class="attr">user</span>: <span class="string">&quot;root&quot;</span>,</span><br><span class="line">    <span class="attr">password</span>: <span class="string">&quot;123456&quot;</span>,</span><br><span class="line">    <span class="attr">connectionLimit</span>: <span class="number">10</span>, <span class="comment">//最多建立几个连接</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.使用连接池</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> statement = <span class="string">`</span></span><br><span class="line"><span class="string">SELECT * FROM products where price&gt;? and score&gt;?</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">connections.<span class="title function_">execute</span>(statement, [<span class="number">6000</span>, <span class="number">7</span>], <span class="function">(<span class="params">err, results</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(results);<span class="comment">//返回的是个数组对象;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>但是上面是通过<strong>回调函数</strong>来获取到的数据。回调函数容易产生<strong>回调地狱</strong>的问题；那如何解决呢？</p></blockquote><ul><li>连接池<code>connections</code>有<code>promise()</code>方法,可以直接调用;</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&quot;mysql2&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.创建连接池</span></span><br><span class="line"><span class="keyword">const</span> connections =mysql.<span class="title function_">createPool</span>(&#123;</span><br><span class="line">    <span class="attr">host</span>:<span class="string">&quot;localhost&quot;</span>,</span><br><span class="line">    <span class="attr">port</span>:<span class="number">3306</span>,</span><br><span class="line">    <span class="attr">database</span>:<span class="string">&quot;bili&quot;</span>,</span><br><span class="line">    <span class="attr">user</span>:<span class="string">&quot;root&quot;</span>,</span><br><span class="line">    <span class="attr">password</span>:<span class="string">&quot;123456&quot;</span>,</span><br><span class="line">    <span class="attr">connectionLimit</span>:<span class="number">10</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.使用连接池  connections有promise()方法,可以直接调用;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> statement=<span class="string">` </span></span><br><span class="line"><span class="string">SELECT * FROM products where price&gt;? and score&gt;?</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 回调函数形式;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// connections.execute(statement,[6000, 7],(err,results)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//     console.log(results);</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// connections有promise()方法,可以直接调用;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里.then中result是个数组是因为用到了数组解构,直接填result进去会得到一堆别的数据</span></span><br><span class="line">connections.<span class="title function_">promise</span>().<span class="title function_">execute</span>(statement,[<span class="number">6000</span>, <span class="number">7</span>]).<span class="title function_">then</span>(<span class="function">(<span class="params">[result]</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(result);<span class="comment">//返回的是个数组对象;</span></span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">err</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(err);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="SQL数据类型"><a href="#SQL数据类型" class="headerlink" title="SQL数据类型"></a>SQL数据类型</h2><h3 id="数字类型"><a href="#数字类型" class="headerlink" title="数字类型"></a>数字类型</h3><p>MySQL的数字类型有很多：</p><ul><li>整数数字类型：INTEGER，INT，SMALLINT，TINYINT，MEDIUMINT，BIGINT；</li><li>浮点数字类型：FLOAT，DOUBLE（FLOAT是4个字节，DOUBLE是8个字节）；</li><li>精确数字类型：DECIMAL，NUMERIC（DECIMAL是NUMERIC的实现形式）；</li></ul><h3 id="日期类型"><a href="#日期类型" class="headerlink" title="日期类型"></a>日期类型</h3><ul><li>YEAR以YYYY格式显示值；(范围 1901到2155，和 0000)；</li><li>DATE以格式YYYY-MM-DD显示值 ；（范围 ‘1000-01-01’ 到 ‘9999-12-31’）；</li><li>DATETIME以格式’YYYY-MM-DD hh:mm:ss’显示值；（支持的范围是1000-01-01 00:00:00到9999-12-31 23:59:59）；</li><li>TIMESTAMP以格式’YYYY-MM-DD hh:mm:ss’显示值；(但是它的范围是UTC的时间范围：’1970-01-01 00:00:01’到’2038-01-19 03:14:07’)；</li></ul><h3 id="字符串类型"><a href="#字符串类型" class="headerlink" title="字符串类型"></a>字符串类型</h3><ul><li>CHAR类型在创建表时为固定长度，长度可以是0到255之间的任何值；(在被查询时，会删除后面的空格)；</li><li>VARCHAR类型的值是可变长度的字符串，长度可以指定为0到65535之间的值；(在被查询时，不会删除后面的空格)；</li><li>TEXT用于存储大的字符串类型；</li><li>BLOB用于存储大的二进制类型；</li></ul><h2 id="SQL表约束"><a href="#SQL表约束" class="headerlink" title="SQL表约束"></a>SQL表约束</h2><h3 id="主键：PRIMARY-KEY"><a href="#主键：PRIMARY-KEY" class="headerlink" title="主键：PRIMARY KEY"></a>主键：PRIMARY KEY</h3><blockquote><p>一张表中，我们为了区分每一条记录的唯一性，必须有一个字段是永远不会重复，并且不会为空的，这个字段我们通常会将它设<br>置为主键。</p></blockquote><ul><li>主键是表中唯一的索引；</li><li>并且必须是NOT NULL的，如果没有设置 NOT NULL，那么MySQL也会隐式的设置为NOT NULL；</li><li>主键也可以是多列索引，PRIMARY KEY(key_part, …)，我们一般称之为联合主键；</li><li>建议：开发中主键字段应该是和业务无关的，尽量不要使用业务字段来作为主键(例如：id)；</li></ul><h3 id="唯一：UNIQUE"><a href="#唯一：UNIQUE" class="headerlink" title="唯一：UNIQUE"></a>唯一：UNIQUE</h3><blockquote><p>某些字段在开发中我们希望是唯一的，不会重复的，比如手机号码、身份证号码等，这个字段我们可以使用UNIQUE来约束。</p></blockquote><ul><li>允许NULL</li></ul><h3 id="不能为空：NOT-NULL"><a href="#不能为空：NOT-NULL" class="headerlink" title="不能为空：NOT NULL"></a>不能为空：NOT NULL</h3><blockquote><p>某些字段我们要求用户必须插入值，不可以为空，这个时候我们可以使用 NOT NULL 来约束；</p></blockquote><h3 id="默认值：DEFAULT"><a href="#默认值：DEFAULT" class="headerlink" title="默认值：DEFAULT"></a>默认值：DEFAULT</h3><blockquote><p>某些字段我们希望在没有设置值时给予一个默认值，这个时候我们可以使用 DEFAULT来完成；</p></blockquote><h3 id="自动递增：AUTO-INCREMENT"><a href="#自动递增：AUTO-INCREMENT" class="headerlink" title="自动递增：AUTO_INCREMENT"></a>自动递增：AUTO_INCREMENT</h3><blockquote><p>某些字段我们希望不设置值时可以进行递增，比如用户的id，这个时候可以使用AUTO_INCREMENT来完成；</p></blockquote><h2 id="常用SQL语句"><a href="#常用SQL语句" class="headerlink" title="常用SQL语句"></a>常用SQL语句</h2><h3 id="单表"><a href="#单表" class="headerlink" title="单表"></a>单表</h3><h4 id="查询"><a href="#查询" class="headerlink" title="查询"></a>查询</h4><h5 id="基础查询"><a href="#基础查询" class="headerlink" title="基础查询"></a>基础查询</h5><ul><li>查询所有字段和所有数据;<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li><li>查询指定字段和所有数据;<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> id,title,price <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li><li>对字段结果起别名(as可以省略不写)<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> id,title <span class="keyword">as</span> phoneTitle,price <span class="keyword">as</span> currentPrice <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li></ul><h5 id="where查询"><a href="#where查询" class="headerlink" title="where查询"></a>where查询</h5><ul><li>查询价格小于1000的手机<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> price<span class="operator">&lt;</span><span class="number">1000</span>;</span><br></pre></td></tr></table></figure></li><li>查询价格等于999的手机 (SQL是一个&#x3D;，和JS别搞混了)<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> price<span class="operator">=</span><span class="number">999</span>;</span><br></pre></td></tr></table></figure></li><li>查询价格不等于999的手机 <figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> price<span class="operator">!=</span><span class="number">999</span>;</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> price<span class="operator">&lt;&gt;</span><span class="number">999</span>;</span><br></pre></td></tr></table></figure></li><li>查询品牌是华为，并且小于2000元的手机<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> `brand` <span class="operator">=</span> <span class="string">&#x27;华为&#x27;</span> <span class="operator">&amp;&amp;</span> `price` <span class="operator">&lt;</span> <span class="number">2000</span>;</span><br></pre></td></tr></table></figure></li><li>查询所有的华为手机或者价格小于1000的手机<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> `brand` <span class="operator">=</span> <span class="string">&#x27;华为&#x27;</span> <span class="operator">||</span> `price` <span class="operator">&lt;</span> <span class="number">1000</span>;</span><br></pre></td></tr></table></figure></li></ul><h5 id="NULL"><a href="#NULL" class="headerlink" title="NULL"></a>NULL</h5><ul><li><p>将id 85-88的url设置为NULL</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">UPDATE</span> `products` <span class="keyword">SET</span> url<span class="operator">=</span><span class="keyword">NULL</span> <span class="keyword">WHERE</span> id<span class="operator">&gt;=</span><span class="number">85</span><span class="operator">&amp;&amp;</span>id<span class="operator">&lt;=</span><span class="number">88</span>;</span><br></pre></td></tr></table></figure></li><li><p>查询某个值为NULL  用 IS 不能用 &#x3D;</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> url <span class="keyword">IS</span> <span class="keyword">NULL</span>;</span><br></pre></td></tr></table></figure></li><li><p>查询某个值不为NULL </p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> url <span class="keyword">IS</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>;</span><br></pre></td></tr></table></figure></li></ul><h5 id="模糊查询"><a href="#模糊查询" class="headerlink" title="模糊查询"></a>模糊查询</h5><ul><li><p>查询所有以v开头的title</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> title <span class="keyword">LIKE</span> <span class="string">&#x27;v%&#x27;</span>;</span><br></pre></td></tr></table></figure></li><li><p>查询带M的title</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> title <span class="keyword">LIKE</span> <span class="string">&#x27;%M%&#x27;</span>;</span><br></pre></td></tr></table></figure></li><li><p>查询带M的title必须是第三个字符</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> title <span class="keyword">LIKE</span> <span class="string">&#x27;__M%&#x27;</span>;</span><br></pre></td></tr></table></figure></li><li><p>IN表示取多个值中的其中一个即可 (取品牌为 华为、小米或苹果的)</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand <span class="operator">=</span>&quot;华为&quot;<span class="operator">||</span>brand<span class="operator">=</span>&quot;小米&quot;<span class="operator">||</span>brand<span class="operator">=</span>&quot;苹果&quot;;</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand <span class="keyword">IN</span>(&quot;华为&quot;,&quot;小米&quot;,&quot;苹果&quot;);</span><br></pre></td></tr></table></figure></li></ul><h5 id="排序"><a href="#排序" class="headerlink" title="排序"></a>排序</h5><blockquote><p>根据哪个字段进行怎么样的排序 ASC 升序  DESC 降序</p></blockquote><ul><li>根据价格的升序,价格一样时，根据评分降序,中间用逗号隔开;<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand <span class="keyword">IN</span>(&quot;华为&quot;,&quot;小米&quot;,&quot;苹果&quot;) <span class="keyword">ORDER</span> <span class="keyword">BY</span> price <span class="keyword">ASC</span>,score <span class="keyword">DESC</span>;</span><br></pre></td></tr></table></figure></li></ul><h5 id="分页查询"><a href="#分页查询" class="headerlink" title="分页查询"></a>分页查询</h5><ul><li><p>查询20条,偏移0条(1-20)</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` LIMIT <span class="number">20</span> <span class="keyword">OFFSET</span> <span class="number">0</span>;</span><br></pre></td></tr></table></figure><ul><li>查询20条,偏移20条(21-40)</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `products` LIMIT <span class="number">20</span> <span class="keyword">OFFSET</span> <span class="number">20</span>;</span><br></pre></td></tr></table></figure></li></ul><h5 id="聚合函数"><a href="#聚合函数" class="headerlink" title="聚合函数"></a>聚合函数</h5><blockquote><p>将表中所有数据看成一个整体；一个组；(例如：一个班)</p></blockquote><ul><li><p>求所有手机价格的总和,key改为 totalPrice;</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">SUM</span>(price) totalPrice <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li><li><p>求华为手机价格的总和,key改为 totalPrice;</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">SUM</span>(price) totalPrice <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand<span class="operator">=</span>&quot;华为&quot;;</span><br></pre></td></tr></table></figure></li><li><p>求华为手机平均价格</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">AVG</span>(price) <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand<span class="operator">=</span>&quot;华为&quot;;</span><br></pre></td></tr></table></figure></li><li><p>求最高手机价格和最低手机价格</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">MAX</span>(price) <span class="keyword">FROM</span> `products`;</span><br><span class="line"><span class="keyword">SELECT</span> <span class="built_in">MIN</span>(price) <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li><li><p>求华为手机个数</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(<span class="operator">*</span>) <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand<span class="operator">=</span>&quot;华为&quot;;</span><br></pre></td></tr></table></figure></li><li><p>求苹果手机存在url的个数 (url不为NULL)</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(url) <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> brand<span class="operator">=</span>&quot;苹果&quot;;</span><br></pre></td></tr></table></figure></li><li><p>求price不为null的个数</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(price) <span class="keyword">FROM</span> `products`;</span><br></pre></td></tr></table></figure></li><li><p>求 price 不为 null 的个数，并进行去重处理</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(<span class="keyword">DISTINCT</span> price) <span class="keyword">FROM</span> products;</span><br></pre></td></tr></table></figure></li></ul><h5 id="GROUP-BY"><a href="#GROUP-BY" class="headerlink" title="GROUP BY"></a>GROUP BY</h5><blockquote><p>GROUP BY通常和聚合函数一起使用 将数据分为多个组；(例如：一个班，通过某个条件进行分组)。</p></blockquote><ul><li><p>通过brand条件进行整体的分组，(一般来说，按照xxx进行整体的划分了，也需要根据xxx来进行查询，所以也会SELECT xxx)；</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> brand <span class="keyword">FROM</span> `products` <span class="keyword">GROUP</span> <span class="keyword">BY</span> brand;</span><br></pre></td></tr></table></figure></li><li><p>通过brand条件进行整体的分组，然后查询出分组之后的每组的平均价格，总数，平均分。</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> brand,<span class="built_in">AVG</span>(price),<span class="built_in">COUNT</span>(<span class="operator">*</span>),<span class="built_in">AVG</span>(score)<span class="keyword">FROM</span> `products` <span class="keyword">GROUP</span> <span class="keyword">BY</span> brand;</span><br></pre></td></tr></table></figure></li></ul><blockquote><p>通过 GROUP BY分组之后，再根据某个条件进行筛选，不能使用WHRER，要使用HAVING(HAVING是对分组之后的数据进行筛选的)</p><p>WHERE 不能放在 GROUP BY 之后；写在 GROUP BY 之前；</p></blockquote><ul><li>求平均价格avgPrice&gt;2000的手机，按照品牌进行分类，求出每个品牌的平均价格，总数，平均分；<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> brand,<span class="built_in">AVG</span>(price) avgPrice,<span class="built_in">COUNT</span>(<span class="operator">*</span>),<span class="built_in">AVG</span>(score)<span class="keyword">FROM</span> products <span class="keyword">GROUP</span> <span class="keyword">BY</span> brand <span class="keyword">HAVING</span> avgPrice<span class="operator">&gt;</span><span class="number">2000</span>;</span><br></pre></td></tr></table></figure></li></ul><h4 id="增加"><a href="#增加" class="headerlink" title="增加"></a>增加</h4><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `products` (`title`, `description`, `price`, `publishTime`) <span class="keyword">VALUES</span> (<span class="string">&#x27;iPhone&#x27;</span>, <span class="string">&#x27;iPhone12只要998&#x27;</span>, <span class="number">998.88</span>, <span class="string">&#x27;2020-10-10&#x27;</span>);</span><br></pre></td></tr></table></figure><h4 id="删除"><a href="#删除" class="headerlink" title="删除"></a>删除</h4><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">DELETE</span> <span class="keyword">FROM</span> `products` <span class="keyword">WHERE</span> `id` <span class="operator">=</span> <span class="number">2</span>;</span><br></pre></td></tr></table></figure><h4 id="修改"><a href="#修改" class="headerlink" title="修改"></a>修改</h4><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">UPDATE</span> `products` <span class="keyword">SET</span> `title` <span class="operator">=</span> <span class="string">&#x27;iPhone12&#x27;</span>, `price` <span class="operator">=</span> <span class="number">1299.88</span> <span class="keyword">WHERE</span> `id` <span class="operator">=</span> <span class="number">2</span>;</span><br></pre></td></tr></table></figure><h3 id="一对多表"><a href="#一对多表" class="headerlink" title="一对多表"></a>一对多表</h3><p>参考文献：<a href="https://blog.csdn.net/llg___/article/details/129739613">MySQL表设计思路</a>，<a href="https://blog.csdn.net/m0_67391120/article/details/123579207">数据库表关系详解（一对多、一对一、多对多）</a>；</p><ul><li>一对多，两张表，多的表加外键；</li><li>在”多”关系的表中去维护一个字段，这个字段是”一”关系的主键；</li><li>加外键约束，会保证数据业务上的一致性；</li></ul><blockquote><p>适用于重复数据的情景。</p><p>假设有 歌曲表，主歌手表；</p><p>一个主歌手可以有多个歌曲；但是反过来：一个歌曲，只能有一个主歌手。称之为一对多表；</p></blockquote><p>例如：一首音乐，有歌手，歌曲URL，歌曲时长等信息；然后歌手还有自己的详细信息，比如性别，籍贯，个人介绍等；这些信息都是重复的数据，如果都放在同一张表，会造成数据冗余。需要进行数据拆分：</p><ul><li>table1歌曲：id，歌曲URL，歌曲时长，歌手的id(第二张表的主键(外键约束))；</li><li>table2主歌手：id，性别，籍贯，个人介绍；</li><li>最后通过table1歌曲中singer_id与table2主歌手的id，将两张表关联起来；</li></ul><blockquote><p>但是table1歌曲中singer_id的值是随便填的嘛，答案肯定是不可以的，否则会发生混乱；需要限制其只能填写table2主歌手中已有的id值；</p><p>此时，table1歌曲的值，需要受限于table2主歌手的值，称之为外键约束。</p></blockquote><h4 id="外键约束"><a href="#外键约束" class="headerlink" title="外键约束"></a>外键约束</h4><blockquote><p>将两张表联系起来，我们可以将song中的singer_id关联到singer中的id。操作步骤见下文navicat–&gt;设置外键。</p></blockquote><h4 id="多表查询"><a href="#多表查询" class="headerlink" title="多表查询"></a>多表查询</h4><ul><li>笛卡尔乘积，表示为 X*Y(第一张表中每一个条数据，都会和第二张表中的每一条数据结合一次)</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="operator">/</span><span class="operator">/</span> 两个表名之间用 逗号 分开</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`,`singer`;</span><br></pre></td></tr></table></figure><ul><li>基础查询( 这个表示查询到笛卡尔乘积后的结果中，符合song.singer_id &#x3D; singer.id条件的数据过滤出来)</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`,`singer` <span class="keyword">WHERE</span> `song`.singer_id <span class="operator">=</span> `singer`.id</span><br></pre></td></tr></table></figure><h5 id="左连接"><a href="#左连接" class="headerlink" title="左连接"></a>左连接</h5><blockquote><p>如果我们希望获取到的是左边所有的数据（以左表为主）；</p><p>这个时候就表示无论左边的表是否有对应的singer_id的值对应右边表的id，左边的数据都会被查询出来；</p><p>这个也是开发中使用最多的情况，它的完整写法是LEFT [OUTER] JOIN，但是OUTER可以省略的；</p></blockquote><ul><li>左边的表数据都有，无论左边的表是否有对应的singer_id的值对应右边表的id，左边的数据都会被查询出来</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id</span><br></pre></td></tr></table></figure><ul><li>左边singer_id的值为NULL的(左边的表没有对应的singer_id的值对应右边表的id)</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id <span class="keyword">WHERE</span> singer_id <span class="keyword">IS</span> <span class="keyword">NULL</span>;</span><br></pre></td></tr></table></figure><h5 id="右连接"><a href="#右连接" class="headerlink" title="右连接"></a>右连接</h5><blockquote><p>如果我们希望获取到的是右边所有的数据（以右表为主）；</p><p>这个时候就表示无论左边的表是否有对应的singer_id的值对应右边表的id，右边的数据都会被查询出来；</p><p>不常用，它的完整写法是RIGHT [OUTER] JOIN，但是OUTER可以省略的</p></blockquote><ul><li>右边的表数据都有，无论左边的表是否有对应的singer_id的值对应右边表的id，右边的数据都会被查询出来</li></ul><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">RIGHT</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id</span><br></pre></td></tr></table></figure><h5 id="内连接"><a href="#内连接" class="headerlink" title="内连接"></a>内连接</h5><blockquote><p>内连接和基础查询where效果是一样的，只不过是内部实现原理不一样；</p></blockquote><ul><li>内连接，代表的是在两张表连接时就会约束数据之间的关系，来决定之后查询的结果；（INNER可以省略）</li><li>where条件，代表的是先计算出笛卡尔乘积，在笛卡尔乘积的数据基础之上进行where条件的帅选；</li></ul><figure class="highlight sql"><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"><span class="operator">/</span><span class="operator">/</span> 以下两种方式的结果一样</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">INNER</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id; <span class="operator">/</span><span class="operator">/</span>内连接</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`,`singer` <span class="keyword">WHERE</span> `song`.singer_id <span class="operator">=</span> `singer`.id; <span class="operator">/</span><span class="operator">/</span> <span class="keyword">where</span>条件</span><br></pre></td></tr></table></figure><h5 id="全连接"><a href="#全连接" class="headerlink" title="全连接"></a>全连接</h5><blockquote><p>SQL规范中全连接是使用FULL JOIN，但是MySQL中并没有对它的支持，我们需要使用 UNION 来实现。</p><p>即：多张表中，所有的数据</p></blockquote><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id) <span class="keyword">UNION</span></span><br><span class="line">(<span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `song`  <span class="keyword">RIGHT</span> <span class="keyword">JOIN</span> `singer`  <span class="keyword">ON</span> `song`.singer_id <span class="operator">=</span> `singer`.id)</span><br></pre></td></tr></table></figure><h5 id="JSON-OBJECT"><a href="#JSON-OBJECT" class="headerlink" title="JSON_OBJECT()"></a>JSON_OBJECT()</h5><blockquote><p>多表查询：将歌手信息放到一个单独的对象中。</p></blockquote><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line"> song.id <span class="keyword">as</span> id, song.name <span class="keyword">as</span> name,</span><br><span class="line"> <span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,singer.id,<span class="string">&#x27;intro&#x27;</span>,singer.introduce,<span class="string">&#x27;sex&#x27;</span>,singer.sex) <span class="keyword">as</span> singerInfo</span><br><span class="line"> <span class="keyword">FROM</span> `song` <span class="keyword">JOIN</span> `singer` <span class="keyword">ON</span> `song`.singer_id<span class="operator">=</span>`singer`.id;</span><br><span class="line"> </span><br><span class="line"> <span class="comment">/** 结果为：</span></span><br><span class="line"><span class="comment">  &#123;</span></span><br><span class="line"><span class="comment">   id: 1,</span></span><br><span class="line"><span class="comment">   name: &quot;fsllala&quot;,</span></span><br><span class="line"><span class="comment">   singerInfo: &#123; id: 1, sex: 1, intro: &quot;前端小菜鸡&quot; &#125;,</span></span><br><span class="line"><span class="comment">  &#125;</span></span><br><span class="line"><span class="comment"> *</span></span><br></pre></td></tr></table></figure><h3 id="多对多表"><a href="#多对多表" class="headerlink" title="多对多表"></a>多对多表</h3><ul><li>多对多，三张表，关系表加外键；</li><li>添加数据时，先添加父表记录(student，course)，再添加子表(student_course_relation)记录；</li><li>删除数据时，先删除子表记录(student_course_relation),再删除父表记录(student，course)；</li></ul><blockquote><p>假设有 学生表，课程表；</p><p>一个学生可以对应多个课程；反过来：一个课程，可以对应多个学生；称之为：多对多表。</p><p>此时添加数据比较麻烦，需要一个关系表，来进行表的关联</p></blockquote><p><img src="https://img.fsllala.top/sql_moreToMore.png"></p><ol><li>创建两张表：学生表，课程表</li></ol><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"># 创建学生表</span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `students`(</span><br><span class="line">id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line">name <span class="type">VARCHAR</span>(<span class="number">20</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line">age <span class="type">INT</span></span><br><span class="line">);</span><br><span class="line"># 创建课程表</span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `courses`(</span><br><span class="line">id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line">name <span class="type">VARCHAR</span>(<span class="number">20</span>) <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line">price <span class="keyword">DOUBLE</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span></span><br><span class="line">);</span><br></pre></td></tr></table></figure><ol start="2"><li>分别插入一些数据</li></ol><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students` (name, age) <span class="keyword">VALUES</span>(<span class="string">&#x27;why&#x27;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students` (name, age) <span class="keyword">VALUES</span>(<span class="string">&#x27;tom&#x27;</span>, <span class="number">22</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students` (name, age) <span class="keyword">VALUES</span>(<span class="string">&#x27;lilei&#x27;</span>, <span class="number">25</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students` (name, age) <span class="keyword">VALUES</span>(<span class="string">&#x27;lucy&#x27;</span>, <span class="number">16</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students` (name, age) <span class="keyword">VALUES</span>(<span class="string">&#x27;lily&#x27;</span>, <span class="number">20</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `courses` (name, price) <span class="keyword">VALUES</span> (<span class="string">&#x27;英语&#x27;</span>, <span class="number">100</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `courses` (name, price) <span class="keyword">VALUES</span> (<span class="string">&#x27;语文&#x27;</span>, <span class="number">666</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `courses` (name, price) <span class="keyword">VALUES</span> (<span class="string">&#x27;数学&#x27;</span>, <span class="number">888</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `courses` (name, price) <span class="keyword">VALUES</span> (<span class="string">&#x27;历史&#x27;</span>, <span class="number">80</span>);</span><br></pre></td></tr></table></figure><ol start="3"><li>创建关系表</li></ol><blockquote><p>我们需要一个关系表来记录两张表中的数据关系</p></blockquote><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"># 创建关系表</span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> IF <span class="keyword">NOT</span> <span class="keyword">EXISTS</span> `students_select_courses`(</span><br><span class="line">id <span class="type">INT</span> <span class="keyword">PRIMARY</span> KEY AUTO_INCREMENT,</span><br><span class="line">student_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line">course_id <span class="type">INT</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span>,</span><br><span class="line"><span class="keyword">FOREIGN</span> KEY (student_id) <span class="keyword">REFERENCES</span> students(id) <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE,</span><br><span class="line"><span class="keyword">FOREIGN</span> KEY (course_id) <span class="keyword">REFERENCES</span> courses(id) <span class="keyword">ON</span> <span class="keyword">UPDATE</span> CASCADE</span><br><span class="line">);</span><br></pre></td></tr></table></figure><ol start="4"><li>向关系表中插入数据</li></ol><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"># why 选修了 英文和数学</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students_select_courses` (student_id, course_id) <span class="keyword">VALUES</span> (<span class="number">1</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students_select_courses` (student_id, course_id) <span class="keyword">VALUES</span> (<span class="number">1</span>, <span class="number">3</span>);</span><br><span class="line"># lilei选修了 语文和数学和历史</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students_select_courses` (student_id, course_id) <span class="keyword">VALUES</span> (<span class="number">3</span>, <span class="number">2</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students_select_courses` (student_id, course_id) <span class="keyword">VALUES</span> (<span class="number">3</span>, <span class="number">3</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `students_select_courses` (student_id, course_id) <span class="keyword">VALUES</span> (<span class="number">3</span>, <span class="number">4</span>);</span><br></pre></td></tr></table></figure><ol start="5"><li>查询</li></ol><blockquote><p>查询多条数据</p></blockquote><figure class="highlight sql"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"># 查询所有的学生选择的所有课程</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">JOIN</span> `courses` cs </span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id; </span><br><span class="line"># 查询所有的学生选课情况</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `courses` cs </span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id;</span><br></pre></td></tr></table></figure><blockquote><p>查询单个学生的课程</p></blockquote><figure class="highlight sql"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"># why同学选择了哪些课程</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">JOIN</span> `courses` cs </span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id</span><br><span class="line"><span class="keyword">WHERE</span> stu.id <span class="operator">=</span> <span class="number">1</span>; </span><br><span class="line"># lily同学选择了哪些课程(注意，这里必须用左连接，事实上上面也应该使用的是左连接)</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `courses` cs </span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id</span><br><span class="line"><span class="keyword">WHERE</span> stu.id <span class="operator">=</span> <span class="number">5</span>;</span><br></pre></td></tr></table></figure><blockquote><p>查询哪些学生没有选择和哪些课程没有被选择：</p></blockquote><figure class="highlight sql"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"># 哪些学生是没有选课的</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `courses` cs</span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id</span><br><span class="line"><span class="keyword">WHERE</span> cs.id <span class="keyword">IS</span> <span class="keyword">NULL</span>;</span><br><span class="line"># 查询哪些课程没有被学生选择</span><br><span class="line"><span class="keyword">SELECT</span> </span><br><span class="line">stu.id studentId, stu.name studentName, cs.id courseId, cs.name courseName, cs.price coursePrice</span><br><span class="line"><span class="keyword">FROM</span> `students` stu</span><br><span class="line"><span class="keyword">RIGHT</span> <span class="keyword">JOIN</span> `students_select_courses` ssc</span><br><span class="line"><span class="keyword">ON</span> stu.id <span class="operator">=</span> ssc.student_id</span><br><span class="line"><span class="keyword">RIGHT</span> <span class="keyword">JOIN</span> `courses` cs</span><br><span class="line"><span class="keyword">ON</span> ssc.course_id <span class="operator">=</span> cs.id</span><br><span class="line"><span class="keyword">WHERE</span> stu.id <span class="keyword">IS</span> <span class="keyword">NULL</span>;</span><br></pre></td></tr></table></figure><h4 id="JSON-ARRAYAGG"><a href="#JSON-ARRAYAGG" class="headerlink" title="JSON_ARRAYAGG"></a>JSON_ARRAYAGG</h4><blockquote><p>多表查询：将课程信息放到一个单独的数组中，数组中又是对象类型；</p></blockquote><figure class="highlight sql"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span></span><br><span class="line"> stu.id <span class="keyword">as</span> id,stu.name <span class="keyword">as</span> name,</span><br><span class="line"> <span class="built_in">JSON_ARRAYAGG</span>(<span class="built_in">JSON_OBJECT</span>(<span class="string">&#x27;id&#x27;</span>,cs.id,<span class="string">&#x27;name&#x27;</span>,cs.name,<span class="string">&#x27;price&#x27;</span>,cs.price)) <span class="keyword">as</span> courseInfo</span><br><span class="line"><span class="keyword">FROM</span></span><br><span class="line">`students` <span class="keyword">as</span> stu</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `students_select_courses` <span class="keyword">as</span> ssc <span class="keyword">ON</span> stu.id<span class="operator">=</span>ssc.student_id</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> `courses` <span class="keyword">as</span> cs <span class="keyword">ON</span>  ssc.course_id<span class="operator">=</span>cs.id</span><br><span class="line"><span class="keyword">WHERE</span></span><br><span class="line"> cs.id <span class="keyword">IS</span> <span class="keyword">NOT</span> <span class="keyword">NULL</span></span><br><span class="line"> <span class="keyword">GROUP</span> <span class="keyword">BY</span></span><br><span class="line">  stu.id</span><br></pre></td></tr></table></figure><h2 id="navicat"><a href="#navicat" class="headerlink" title="navicat"></a>navicat</h2><h3 id="设置字段为自动更新时间列"><a href="#设置字段为自动更新时间列" class="headerlink" title="设置字段为自动更新时间列"></a>设置字段为自动更新时间列</h3><p><a href="https://blog.csdn.net/TangBoBoa/article/details/129958447?spm=1001.2014.3001.5506">参考文献</a></p><ul><li>选中列后在默认值写上<code>CURRENT_TIMESTAMP</code>，默认值下面的选项意思是当前列是否要在数据行内容更新时更新当前列时间；</li><li>createTime：默认值写上<code>CURRENT_TIMESTAMP</code>；默认值下面的选项不勾选；长度设置为(0-6)；</li><li>updateTime：默认值写上<code>CURRENT_TIMESTAMP</code>；默认值下面的选项勾选；长度设置为(0-6)；</li><li>长度可以传0-6的数字，表示时间的精度，比如 <code>CURRENT_TIMESTAMP(3)</code>表示精确到毫秒值；</li></ul><h3 id="设置唯一"><a href="#设置唯一" class="headerlink" title="设置唯一"></a>设置唯一</h3><p><a href="https://blog.csdn.net/Song_JiangTao/article/details/82192189?spm=1001.2014.3001.5506">参考文献</a></p><ol><li>右键–&gt;设计表</li><li>清楚你想要设计哪个字段为唯一的，例如我这里是设计name字段唯一，然后点击索引；</li><li>然后设置相关内容<ul><li>名：索引名</li><li>字段：想要设计的那个UNIQUE字段名，这里可以选择，也可以直接输入</li><li>索引类型：当然是选择UNIQUE啦</li><li>索引方法：可以不写；</li><li>注释：就是注释啦</li></ul></li></ol><h3 id="设置外键"><a href="#设置外键" class="headerlink" title="设置外键"></a>设置外键</h3><p><a href="https://blog.csdn.net/qq_43496316/article/details/103500093?spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-10-103500093-blog-129178444.235%5Ev38%5Epc_relevant_sort_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-10-103500093-blog-129178444.235%5Ev38%5Epc_relevant_sort_base3&utm_relevant_index=18">参考文献</a></p><ol><li>在table1中，右键–&gt;设计表–&gt;添加字段(singer_id)–&gt;保存–&gt;点击”外键”，然后进行如下配置；</li></ol><p><img src="https://img.fsllala.top/mysql_outKey.png"></p><ol start="2"><li>删除&#x2F;更新时：</li></ol><ul><li><p>RESTRICT(默认属性)：当更新或删除某个记录时，会检查该记录是否有关联的外键记录，有的话会报错的，不允许更新或</p><p>删除；</p></li><li><p>NO ACTION：和RESTRICT是一致的，是在SQL标准中定义的；</p></li><li><p>CASCADE（级联）：当更新或删除某个记录时，会检查该记录是否有关联的外键记录，有的话：</p><ul><li>更新：那么会更新对应的记录；</li><li>删除：那么关联的记录会被一起删除掉；</li></ul></li><li><p>SET NULL：当更新或删除某个记录时，会检查该记录是否有关联的外键记录，有的话，将对应的值设置为NULL；</p></li></ul>]]></content>
       
       
       <categories>
@@ -245,7 +245,7 @@
       <link href="/articles/8ba9ed2d.html"/>
       <url>/articles/8ba9ed2d.html</url>
       
-        <content type="html"><![CDATA[<h1 id="Express"><a href="#Express" class="headerlink" title="Express"></a>Express</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><ul><li>Express 是一个简洁而灵活的 Node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用</li><li>Express内部还是使用的http模块实现服务器创建和监听, 对http模块进行了二次封装</li><li>严格上来说  express就是NodeJS的一个模块  直接下载安装</li></ul><h2 id="中文官网"><a href="#中文官网" class="headerlink" title="中文官网"></a>中文官网</h2><p><a href="http://express.js.cn/">express中文官网</a></p><h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><ul><li>node下载express模块：</li><li>命令  ： <ul><li>初始化服务 ： <code>npm init -y</code>  </li><li>下载express：  <code>npm  i  express</code></li></ul></li><li>使用的时候  引入  需要实例化一个express应用  使用应用对象创建各种服务</li></ul><h2 id="express初体验"><a href="#express初体验" class="headerlink" title="express初体验"></a>express初体验</h2><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="comment">// express其实是一个函数;</span></span><br><span class="line"><span class="comment">// 调用函数返回 app,app本质也是一个函数;</span></span><br><span class="line"><span class="keyword">const</span> app =<span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听默认路径(GET)</span></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;hello GET express&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听默认路径(POST)</span></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;hello POST express&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 开启监听</span></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="express中间件"><a href="#express中间件" class="headerlink" title="express中间件"></a>express中间件</h2><h3 id="中间件基本概念"><a href="#中间件基本概念" class="headerlink" title="中间件基本概念"></a>中间件基本概念</h3><blockquote><p>Express是一个路由和中间件的Web框架，Express应用程序本质上是一系列中间件函数的调用；那么，中间件是什么呢？</p></blockquote><ul><li>中间件的本质是传递给express的一个回调函数；</li><li>这个回调函数接受三个参数：</li><li>请求对象（request对象）；</li><li>响应对象（response对象）；</li><li>next函数（在express中定义的用于执行下一个中间件的函数）；</li></ul><blockquote><p> 中间件中可以执行哪些任务呢？</p></blockquote><ul><li>执行任何代码；</li><li>更改请求（request）和响应（response）对象；</li><li>结束请求-响应周期（返回数据）；</li><li>调用栈中的下一个中间件；</li><li>如果当前中间件功能没有结束请求-响应周期，则必须调用next()将控制权传递给下一个中间件功能，否则，请求 将被挂起。</li></ul><h3 id="app-use创建最普通中间件-对method和路由均没有限制"><a href="#app-use创建最普通中间件-对method和路由均没有限制" class="headerlink" title="app.use创建最普通中间件(对method和路由均没有限制)"></a>app.use创建最普通中间件(对method和路由均没有限制)</h3><blockquote><p>使用<code>app.use</code>注册一个最普通的中间件，因为没有对<code>method</code>做限制，所以<code>GET请求</code>与<code>POST请求</code>都可以访问；因为没有对<code>路由</code>做限制，所以<code>所有路由</code>都可以访问；</p></blockquote><figure class="highlight js"><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="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编写普通中间件</span></span><br><span class="line"><span class="comment">// use注册一个中间件(回调函数)</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第01个普通中间件&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;over&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="app-use创建多个最普通中间件"><a href="#app-use创建多个最普通中间件" class="headerlink" title="app.use创建多个最普通中间件"></a>app.use创建多个最普通中间件</h3><blockquote><p>app.use注册多个最普通的中间件，当发送请求的时候，虽然这几个中间件都可以匹配成功，但是只会执行第01个中间件；后面的即使匹配成功了，也不会执行；</p><p>即：中间件永远查找匹配成功的第一个中间件，要想别的匹配成功的中间件也执行，需要在上一个匹配成功的中间件执行next()；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编写普通中间件</span></span><br><span class="line"><span class="comment">// use注册一个中间件(回调函数)</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第01个普通中间件&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;over&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第02个普通中间件&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第03个普通中间件&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>那么如何执行多个中间件呢？</p><p>答：使用<code>next()</code>调用栈中的下一个<code>可以匹配成功</code>的中间件；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编写普通中间件</span></span><br><span class="line"><span class="comment">// use注册一个中间件(回调函数)</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第01个普通中间件&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;over&quot;</span>);</span><br><span class="line">    <span class="title function_">next</span>(); <span class="comment">//调用了下一个匹配成功的中间件</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第02个普通中间件&quot;</span>);</span><br><span class="line">    <span class="title function_">next</span>(); <span class="comment">//调用了下一个匹配成功的中间件</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第03个普通中间件&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="路由中间件"><a href="#路由中间件" class="headerlink" title="路由中间件"></a>路由中间件</h3><blockquote><p> 路径匹配中间件：对路由做限制，对method不做限制</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 路径匹配中间件：对路由做限制，对method不做限制</span></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 以下均可匹配成功</span></span><br><span class="line"><span class="comment"> * http://127.0.0.1:3000/home</span></span><br><span class="line"><span class="comment"> * http://127.0.0.1:3000/home?username=fwd&amp;password=123456</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">// </span></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="string">&quot;/home&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home middleware 01&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;home middleware&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>多个路由中间件同上，需要调用next()执行下一个匹配成功的中间件；</p></blockquote><h3 id="路由和方法都匹配的中间件"><a href="#路由和方法都匹配的中间件" class="headerlink" title="路由和方法都匹配的中间件"></a>路由和方法都匹配的中间件</h3><blockquote><p>不使用<code>app.use</code>即可</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/home&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 01&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;home middleware&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;login path and method middleware 01&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;login middleware&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="连续注册中间件-koa不支持"><a href="#连续注册中间件-koa不支持" class="headerlink" title="连续注册中间件(koa不支持)"></a>连续注册中间件(koa不支持)</h3><blockquote><p>多个参数，每个参数都是回调函数</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这样其实也只会匹配第一个匹配的中间件,即打印  home path and method middleware 01</span></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/home&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 01&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;home middleware&quot;</span>);</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 02&quot;</span>);</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 03&quot;</span>);</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 04&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>要想执行多个匹配成功的中间件，也还是调用next()；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/home&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 01&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;home middleware&quot;</span>);</span><br><span class="line">    <span class="title function_">next</span>();</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 02&quot;</span>);</span><br><span class="line">    <span class="title function_">next</span>();</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 03&quot;</span>);</span><br><span class="line">    <span class="title function_">next</span>();</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 04&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="POST请求body参数解析"><a href="#POST请求body参数解析" class="headerlink" title="POST请求body参数解析"></a>POST请求body参数解析</h2><h3 id="中间件应用-json-urlencoded解析"><a href="#中间件应用-json-urlencoded解析" class="headerlink" title="中间件应用-json-urlencoded解析"></a>中间件应用-json-urlencoded解析</h3><blockquote><p>注册express内置的<code>body-parser</code>；使用<code>req.body</code>接收参数；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用body-parser  express内置成函数 即直接注册</span></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">json</span>());  <span class="comment">//解析 JSON数据</span></span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">urlencoded</span>(&#123;<span class="attr">extended</span>:<span class="literal">true</span>&#125;)); <span class="comment">//解析 x-www-form-urlencoded 数据</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">const</span> info = req.<span class="property">body</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(info);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;使用req.body获取body参数&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>关于express.urlencoded({extended:true})中的extended：</p></blockquote><ul><li>true:  那么对urlencoded进行解析时,他使用的是第三方库：qs</li><li>false：那么对urlencoded进行解析时,他使用的是node内置模块：querystring</li></ul><h3 id="中间件应用-form-data解析"><a href="#中间件应用-form-data解析" class="headerlink" title="中间件应用-form-data解析"></a>中间件应用-form-data解析</h3><blockquote><p>form-data解析：一般用于上传图片文件；</p><p>express框架没有内置的解析中间件，但是有官方的库<code>multer</code>，需要下载安装一下：<code>npm i multer</code></p></blockquote><h4 id="初步使用"><a href="#初步使用" class="headerlink" title="初步使用"></a>初步使用</h4><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1671354368858formdata1.png" alt="multer初使用"></p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//不推荐此写法</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"><span class="comment">// 引入multer,是个函数</span></span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;multer&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用multer函数</span></span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 表示 form-data中普通的数据</span></span><br><span class="line">app.<span class="title function_">use</span>(upload.<span class="title function_">any</span>());</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/upload&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">body</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;用户上传成功&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>但是上方写法存在个问题：<a href="https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md">https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md</a>  写着”永远不要将 multer 作为全局中间件使用，因为恶意用户可以上传文件到一个你没有预料到的路由，应该只在你需要处理上传文件的路由上使用；</p></blockquote><ul><li>如果你需要处理一个只有文本域的表单，你应当使用 <code>.none()</code>:</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="comment">// 引入multer,是个函数</span></span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;multer&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>()</span><br><span class="line"><span class="comment">// 如果你需要处理一个只有文本域的表单，你应当使用 .none():</span></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/upload&quot;</span>, upload.<span class="title function_">none</span>(), <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// req.body 包含文本域</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">body</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;用户上传成功~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h4 id="文件上传"><a href="#文件上传" class="headerlink" title="文件上传"></a>文件上传</h4><blockquote><p>上传图片文件，并且将上传的图片文件放在服务器中某位置：</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="comment">// 引入multer,是个函数</span></span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;multer&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 表示将上传的文件指定地址存放，若没有该文件，则创建文件夹(启动服务的时候,没有的话会创建文件夹)</span></span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>(&#123;</span><br><span class="line">    <span class="attr">dest</span>: <span class="string">&quot;./uploadImg/&quot;</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里使用连续中间件，upload.single(&#x27;img&#x27;)表示解析单个文件夹，且key值为 &quot;img&quot;,</span></span><br><span class="line"><span class="comment">// 进行处理后，传递给后面的中间件 next ，然后返回结果给客户端</span></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/upload&quot;</span>, upload.<span class="title function_">single</span>(<span class="string">&quot;avatar&quot;</span>), <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// req.file 是 `avatar` 文件的信息</span></span><br><span class="line">    <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">file</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">body</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;用户上传成功~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>此时我们图片没有后缀，而且不能直接打开，我们给图片添加后缀和重命名</p></blockquote><ul><li>磁盘存储引擎 (DiskStorage)：磁盘存储引擎可以让你控制文件的存储。</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;multer&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> storage = multer.<span class="title function_">diskStorage</span>(&#123;</span><br><span class="line">    <span class="comment">// 回调函数写法 这个文件夹必须自己手动创建,没有的话也不会自动创建;</span></span><br><span class="line">    <span class="attr">destination</span>: <span class="function">(<span class="params">req, file, cb</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="string">&quot;./uploadImg/&quot;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">filename</span>: <span class="function">(<span class="params">req, file, cb</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// path.extname(file.originalname))获取文件的拓展名 .png .jpg .gif</span></span><br><span class="line">        <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="title class_">Date</span>.<span class="title function_">now</span>() + path.<span class="title function_">extname</span>(file.<span class="property">originalname</span>));</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>(&#123;</span><br><span class="line">    storage</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里使用连续中间件，upload.single(&#x27;img&#x27;)表示解析单个文件夹，且key值为 &quot;img&quot;,</span></span><br><span class="line"><span class="comment">// 进行处理后，传递给后面的中间件 next ，然后返回结果给客户端</span></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/upload&quot;</span>, upload.<span class="title function_">single</span>(<span class="string">&quot;avatar&quot;</span>), <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// req.file 是 `avatar` 文件的信息</span></span><br><span class="line">    <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">file</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">body</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;用户上传成功~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>这里使用diskStorage处理文件上传的地址和文件名，其中 destination可以为字符串也可以为函数，但是两者使用上有区别：</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 为上传的文件添加后缀和文件名</span></span><br><span class="line"><span class="keyword">const</span> storage = multer.<span class="title function_">diskStorage</span>(&#123;</span><br><span class="line">    <span class="comment">// cb是callback回调函数的缩写</span></span><br><span class="line">    <span class="comment">// destination:(req,file,cb)=&gt;&#123;</span></span><br><span class="line">    <span class="comment">//     cb(null,&#x27;./uploadImg/&#x27;)</span></span><br><span class="line">    <span class="comment">// &#125;,</span></span><br><span class="line">    <span class="attr">destination</span>:<span class="string">&quot;./uploadImg/&quot;</span>,</span><br><span class="line">    <span class="attr">filename</span>:<span class="function">(<span class="params">req,file,cb</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="comment">// 文件名取 时间戳和原文件的后缀名进行组合</span></span><br><span class="line">        <span class="title function_">cb</span>(<span class="literal">null</span>,<span class="title class_">Date</span>.<span class="title function_">now</span>()+path.<span class="title function_">extname</span>(file.<span class="property">originalname</span>))</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ul><li>字符串，将根据字符串，创建文件夹；</li><li>回调函数中，传入的字符串表示文件放入的地址不会创建该文件夹（若没有的话）；</li></ul><blockquote><p>上面是一次上传一张图片的情形，其实还有一次上传多张图片的情形；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> multer  = <span class="built_in">require</span>(<span class="string">&#x27;multer&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>(&#123; <span class="attr">dest</span>: <span class="string">&#x27;uploads/&#x27;</span> &#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>()</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&#x27;/profile&#x27;</span>, upload.<span class="title function_">single</span>(<span class="string">&#x27;avatar&#x27;</span>), <span class="keyword">function</span> (<span class="params">req, res, next</span>) &#123;</span><br><span class="line">  <span class="comment">// req.file 是 `avatar` 文件的信息</span></span><br><span class="line">  <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&#x27;/photos/upload&#x27;</span>, upload.<span class="title function_">array</span>(<span class="string">&#x27;photos&#x27;</span>, <span class="number">12</span>), <span class="keyword">function</span> (<span class="params">req, res, next</span>) &#123;</span><br><span class="line">  <span class="comment">// req.files 是 `photos` 文件数组的信息</span></span><br><span class="line">  <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> cpUpload = upload.<span class="title function_">fields</span>([&#123; <span class="attr">name</span>: <span class="string">&#x27;avatar&#x27;</span>, <span class="attr">maxCount</span>: <span class="number">1</span> &#125;, &#123; <span class="attr">name</span>: <span class="string">&#x27;gallery&#x27;</span>, <span class="attr">maxCount</span>: <span class="number">8</span> &#125;])</span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&#x27;/cool-profile&#x27;</span>, cpUpload, <span class="keyword">function</span> (<span class="params">req, res, next</span>) &#123;</span><br><span class="line">  <span class="comment">// req.files 是一个对象 (String -&gt; Array) 键是文件名，值是文件数组</span></span><br><span class="line">  <span class="comment">//</span></span><br><span class="line">  <span class="comment">// 例如：</span></span><br><span class="line">  <span class="comment">//  req.files[&#x27;avatar&#x27;][0] -&gt; File</span></span><br><span class="line">  <span class="comment">//  req.files[&#x27;gallery&#x27;] -&gt; Array</span></span><br><span class="line">  <span class="comment">//</span></span><br><span class="line">  <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ul><li>.single(fieldname)：接受一个以 fieldname 命名的文件。这个文件的信息保存在 req.file。</li><li>.array(fieldname[, maxCount])：接受一个以 fieldname 命名的文件数组。可以配置 maxCount 来限制上传的最大数量。这些文件的信息保存在 req.files。</li><li>.fields(fields)：接受指定 fields 的混合文件。这些文件的信息保存在 req.files；fields 应该是一个对象数组，应该具有 name 和可选的 maxCount 属性。</li><li>array和fields区别是：array上传的多张文件名的key都是一样的，而fields因为参数是数组对象，所以可以多种key，每个key又能限制count；</li></ul><p>Example:</p><figure class="highlight js"><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">[</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;avatar&#x27;</span>, <span class="attr">maxCount</span>: <span class="number">1</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;gallery&#x27;</span>, <span class="attr">maxCount</span>: <span class="number">8</span> &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure><blockquote><p>upload.any()不作为全局，作为局部中间件；也可以接收一次上传多张的情形，而且还不用指定key；更加自由；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;multer&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">//这个文件夹必须自己手动创建,没有的话也不会自动创建;</span></span><br><span class="line"><span class="keyword">const</span> storage = multer.<span class="title function_">diskStorage</span>(&#123;</span><br><span class="line">    <span class="attr">destination</span>:<span class="string">&quot;./uploadImg/&quot;</span>,</span><br><span class="line">    <span class="attr">filename</span>: <span class="function">(<span class="params">req, file, cb</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// path.extname(file.originalname))获取文件的拓展名 .png .jpg .gif</span></span><br><span class="line">        <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="title class_">Date</span>.<span class="title function_">now</span>() + path.<span class="title function_">extname</span>(file.<span class="property">originalname</span>));</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>(&#123;</span><br><span class="line">    storage</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// upload.any()作为中间件;</span></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/upload&quot;</span>, upload.<span class="title function_">any</span>(), <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// req.files 是文件的信息 数组对象</span></span><br><span class="line">    <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">files</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">body</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;用户上传成功~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="GET请求参数解析"><a href="#GET请求参数解析" class="headerlink" title="GET请求参数解析"></a>GET请求参数解析</h2><h3 id="params解析-路由参数"><a href="#params解析-路由参数" class="headerlink" title="params解析(路由参数)"></a>params解析(路由参数)</h3><blockquote><p>&#x2F;products&#x2F;:id&#x2F;:name的这种的(<a href="http://127.0.0.1:3000/products/fsl/forward)%EF%BC%8C%E7%94%A8req.params%E8%A7%A3%E6%9E%90">http://127.0.0.1:3000/products/fsl/forward)，用req.params解析</a></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express= <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">//  http://127.0.0.1:3000/products/fsl/forward</span></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/products/:id/:name&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">// 通过req.params接收,接收的是一个对象</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">params</span>); <span class="comment">//&#123; id: &#x27;fsl&#x27;, name: &#x27;forward&#x27; &#125;</span></span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;商品的详情数据~&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="query解析"><a href="#query解析" class="headerlink" title="query解析"></a>query解析</h3><blockquote><p>&#x2F;login这种的(<a href="http://127.0.0.1:3000/login?name=fsl&age=18)%EF%BC%8C%E7%94%A8req.query%E8%A7%A3%E6%9E%90">http://127.0.0.1:3000/login?name=fsl&amp;age=18)，用req.query解析</a></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express= <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// http://127.0.0.1:3000/login?name=fsl&amp;age=18</span></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/login&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">// 通过req.query接收,接收的是一个对象</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">query</span>); <span class="comment">// &#123; name: &#x27;fsl&#x27;, age: &#x27;18&#x27; &#125;</span></span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;登陆成功~&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="响应数据"><a href="#响应数据" class="headerlink" title="响应数据"></a>响应数据</h2><ul><li>res.end(xxx)：只能返回 字符串、buffer数据等，不能返回 JSON，数组；</li><li>res.json(xxx)：可以传入很多的类型：object、array、string、boolean、number、null等，它们会被转换成<br>json格式返回；</li><li>res.status(200)：用于设置状态码</li></ul><h2 id="express路由"><a href="#express路由" class="headerlink" title="express路由"></a>express路由</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 举个例子： 这些所有的放在一个app文件里,接口看起来是有点重复的,而且太多了,不方便管理;</span></span><br><span class="line"><span class="comment"> *     请求所有的用户信息：get     /users</span></span><br><span class="line"><span class="comment"> *     请求某个用户信息：  get     /users/:id</span></span><br><span class="line"><span class="comment"> *     创建某个用户信息：  post    /users   body &#123;username:fsllala,password:123&#125;</span></span><br><span class="line"><span class="comment"> *     删除某个用户信息：  delete  /users/:id</span></span><br><span class="line"><span class="comment"> *     更新某个用户信息：  put     /users/:id</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure><blockquote><p>我们可以使用 <code>express.Router()</code>来创建一个路由处理程序：一个Router实例拥有完整的中间件和路由系统；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//新建一个router文件夹,下面创建user.js</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> router = express.<span class="title class_">Router</span>();  <span class="comment">//express.Router()是个函数</span></span><br><span class="line"></span><br><span class="line">router.<span class="title function_">get</span>(<span class="string">&quot;/users&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>([<span class="string">&quot;why&quot;</span>, <span class="string">&quot;kobe&quot;</span>, <span class="string">&quot;fsllala&quot;</span>]);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.<span class="title function_">get</span>(<span class="string">&quot;/users/:id&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(<span class="string">`<span class="subst">$&#123;req.params.id&#125;</span>用户的信息`</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.<span class="title function_">post</span>(<span class="string">&quot;/users&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(<span class="string">&quot;create user success~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = router;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在app文件里引入路由</span></span><br><span class="line"><span class="keyword">const</span> express= <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;./router/user.js&quot;</span>)</span><br><span class="line">app.<span class="title function_">use</span>(userRouter);  <span class="comment">//注册路由</span></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>注册路由的时候,可以有两个参数 app.use(“&#x2F;公共路由”，”路由”)；上面的写法就可以写成下面这样：</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//新建一个router文件夹,下面创建user.js</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> router = express.<span class="title class_">Router</span>();  <span class="comment">//express.Router()是个函数</span></span><br><span class="line"></span><br><span class="line">router.<span class="title function_">get</span>(<span class="string">&quot;/&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>([<span class="string">&quot;why&quot;</span>, <span class="string">&quot;kobe&quot;</span>, <span class="string">&quot;fsllala&quot;</span>]);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.<span class="title function_">get</span>(<span class="string">&quot;/:id&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(<span class="string">`<span class="subst">$&#123;req.params.id&#125;</span>用户的信息`</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(<span class="string">&quot;create user success~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = router;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在app文件里引入路由</span></span><br><span class="line"><span class="keyword">const</span> express= <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;./router/user.js&quot;</span>)</span><br><span class="line">app.<span class="title function_">use</span>(<span class="string">&quot;/users&quot;</span>,userRouter);  <span class="comment">//注册路由</span></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="服务端错误处理"><a href="#服务端错误处理" class="headerlink" title="服务端错误处理"></a>服务端错误处理</h2><ul><li>处理方式一：不易维护(后期修改code码&#x2F;message信息)；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">json</span>());</span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">urlencoded</span>(&#123; <span class="attr">extended</span>: <span class="literal">true</span> &#125;));</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; username, password &#125; = req.<span class="property">body</span>;</span><br><span class="line">  <span class="keyword">if</span> (!username || !password) &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(&#123;</span><br><span class="line">      <span class="attr">code</span>: -<span class="number">1001</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;请输入用户名或密码！&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (username !== <span class="string">&quot;fsllala&quot;</span> || password !== <span class="string">&quot;123456&quot;</span>) &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(&#123;</span><br><span class="line">      <span class="attr">code</span>: -<span class="number">1002</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;用户名或密码错误！&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(&#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;登录成功！&quot;</span>,</span><br><span class="line">      <span class="attr">token</span>:<span class="string">&quot;fasfasf123123aff&quot;</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running~&quot;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><ul><li>处理方式二：通过next()传递给下一个匹配的中间件，其中next可以传递 <strong>错误信息</strong>；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">json</span>());</span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">urlencoded</span>(&#123; <span class="attr">extended</span>: <span class="literal">true</span> &#125;));</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; username, password &#125; = req.<span class="property">body</span>;</span><br><span class="line">  <span class="keyword">if</span> (!username || !password) &#123;</span><br><span class="line">    <span class="comment">// 通过next传递给下一个匹配的中间件,其中next可以传递 错误信息;</span></span><br><span class="line">    <span class="title function_">next</span>(-<span class="number">1001</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (username !== <span class="string">&quot;fsllala&quot;</span> || password !== <span class="string">&quot;123456&quot;</span>) &#123;</span><br><span class="line">    <span class="title function_">next</span>(-<span class="number">1002</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(&#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;登录成功！&quot;</span>,</span><br><span class="line">      <span class="attr">token</span>:<span class="string">&quot;fasfasf123123aff&quot;</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 处理错误的中间件 (err接收next传递的错误信息)</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">err, req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// console.log(err);</span></span><br><span class="line">  <span class="keyword">const</span> code = err;</span><br><span class="line">  <span class="keyword">let</span> message = <span class="string">&quot;未知错误&quot;</span>;</span><br><span class="line">  <span class="keyword">switch</span> (err) &#123;</span><br><span class="line">    <span class="keyword">case</span> -<span class="number">1001</span>:</span><br><span class="line">      message = <span class="string">&quot;请输入用户名或密码！&quot;</span>;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> -<span class="number">1002</span>:</span><br><span class="line">      message = <span class="string">&quot;用户名或密码错误！&quot;</span>;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  res.<span class="title function_">json</span>(&#123; code, message &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running~&quot;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md">multer官方文档</a></p><p><a href="https://blog.csdn.net/qq_64841572/article/details/126254419?spm=1001.2014.3001.5506">Node中间件multer库学习</a></p>]]></content>
+        <content type="html"><![CDATA[<h1 id="Express"><a href="#Express" class="headerlink" title="Express"></a>Express</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><ul><li>Express 是一个简洁而灵活的 Node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用</li><li>Express内部还是使用的http模块实现服务器创建和监听, 对http模块进行了二次封装</li><li>严格上来说  express就是NodeJS的一个模块  直接下载安装</li></ul><h2 id="中文官网"><a href="#中文官网" class="headerlink" title="中文官网"></a>中文官网</h2><p><a href="http://express.js.cn/">express中文官网</a></p><h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><ul><li>node下载express模块：</li><li>命令  ： <ul><li>初始化服务 ： <code>npm init -y</code>  </li><li>下载express：  <code>npm  i  express</code></li></ul></li><li>使用的时候  引入  需要实例化一个express应用  使用应用对象创建各种服务</li></ul><h2 id="express初体验"><a href="#express初体验" class="headerlink" title="express初体验"></a>express初体验</h2><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="comment">// express其实是一个函数;</span></span><br><span class="line"><span class="comment">// 调用函数返回 app,app本质也是一个函数;</span></span><br><span class="line"><span class="keyword">const</span> app =<span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听默认路径(GET)</span></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;hello GET express&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听默认路径(POST)</span></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;hello POST express&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 开启监听</span></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="express中间件"><a href="#express中间件" class="headerlink" title="express中间件"></a>express中间件</h2><h3 id="中间件基本概念"><a href="#中间件基本概念" class="headerlink" title="中间件基本概念"></a>中间件基本概念</h3><blockquote><p>Express是一个路由和中间件的Web框架，Express应用程序本质上是一系列中间件函数的调用；那么，中间件是什么呢？</p></blockquote><ul><li>中间件的本质是传递给express的一个回调函数；</li><li>这个回调函数接受三个参数：</li><li>请求对象（request对象）；</li><li>响应对象（response对象）；</li><li>next函数（在express中定义的用于执行下一个中间件的函数）；</li></ul><blockquote><p> 中间件中可以执行哪些任务呢？</p></blockquote><ul><li>执行任何代码；</li><li>更改请求（request）和响应（response）对象；</li><li>结束请求-响应周期（返回数据）；</li><li>调用栈中的下一个中间件；</li><li>如果当前中间件功能没有结束请求-响应周期，则必须调用next()将控制权传递给下一个中间件功能，否则，请求 将被挂起。</li></ul><h3 id="app-use创建最普通中间件-对method和路由均没有限制"><a href="#app-use创建最普通中间件-对method和路由均没有限制" class="headerlink" title="app.use创建最普通中间件(对method和路由均没有限制)"></a>app.use创建最普通中间件(对method和路由均没有限制)</h3><blockquote><p>使用<code>app.use</code>注册一个最普通的中间件，因为没有对<code>method</code>做限制，所以<code>GET请求</code>与<code>POST请求</code>都可以访问；因为没有对<code>路由</code>做限制，所以<code>所有路由</code>都可以访问；</p></blockquote><figure class="highlight js"><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="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编写普通中间件</span></span><br><span class="line"><span class="comment">// use注册一个中间件(回调函数)</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第01个普通中间件&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;over&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="app-use创建多个最普通中间件"><a href="#app-use创建多个最普通中间件" class="headerlink" title="app.use创建多个最普通中间件"></a>app.use创建多个最普通中间件</h3><blockquote><p>app.use注册多个最普通的中间件，当发送请求的时候，虽然这几个中间件都可以匹配成功，但是只会执行第01个中间件；后面的即使匹配成功了，也不会执行；</p><p>即：中间件永远查找匹配成功的第一个中间件，要想别的匹配成功的中间件也执行，需要在上一个匹配成功的中间件执行next()；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编写普通中间件</span></span><br><span class="line"><span class="comment">// use注册一个中间件(回调函数)</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第01个普通中间件&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;over&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第02个普通中间件&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第03个普通中间件&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>那么如何执行多个中间件呢？</p><p>答：使用<code>next()</code>调用栈中的下一个<code>可以匹配成功</code>的中间件；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编写普通中间件</span></span><br><span class="line"><span class="comment">// use注册一个中间件(回调函数)</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第01个普通中间件&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;over&quot;</span>);</span><br><span class="line">    <span class="title function_">next</span>(); <span class="comment">//调用了下一个匹配成功的中间件</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第02个普通中间件&quot;</span>);</span><br><span class="line">    <span class="title function_">next</span>(); <span class="comment">//调用了下一个匹配成功的中间件</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;注册了第03个普通中间件&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="路由中间件"><a href="#路由中间件" class="headerlink" title="路由中间件"></a>路由中间件</h3><blockquote><p> 路径匹配中间件：对路由做限制，对method不做限制</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 路径匹配中间件：对路由做限制，对method不做限制</span></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 以下均可匹配成功</span></span><br><span class="line"><span class="comment"> * http://127.0.0.1:3000/home</span></span><br><span class="line"><span class="comment"> * http://127.0.0.1:3000/home?username=fwd&amp;password=123456</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">// </span></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="string">&quot;/home&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home middleware 01&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;home middleware&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>多个路由中间件同上，需要调用next()执行下一个匹配成功的中间件；</p></blockquote><h3 id="路由和方法都匹配的中间件"><a href="#路由和方法都匹配的中间件" class="headerlink" title="路由和方法都匹配的中间件"></a>路由和方法都匹配的中间件</h3><blockquote><p>不使用<code>app.use</code>即可</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/home&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 01&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;home middleware&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;login path and method middleware 01&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;login middleware&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="连续注册中间件-koa不支持"><a href="#连续注册中间件-koa不支持" class="headerlink" title="连续注册中间件(koa不支持)"></a>连续注册中间件(koa不支持)</h3><blockquote><p>多个参数，每个参数都是回调函数</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这样其实也只会匹配第一个匹配的中间件,即打印  home path and method middleware 01</span></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/home&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 01&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;home middleware&quot;</span>);</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 02&quot;</span>);</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 03&quot;</span>);</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 04&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>要想执行多个匹配成功的中间件，也还是调用next()；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/home&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 01&quot;</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;home middleware&quot;</span>);</span><br><span class="line">    <span class="title function_">next</span>();</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 02&quot;</span>);</span><br><span class="line">    <span class="title function_">next</span>();</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 03&quot;</span>);</span><br><span class="line">    <span class="title function_">next</span>();</span><br><span class="line">&#125;, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;home path and method middleware 04&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="POST请求body参数解析"><a href="#POST请求body参数解析" class="headerlink" title="POST请求body参数解析"></a>POST请求body参数解析</h2><h3 id="中间件应用-json-urlencoded解析"><a href="#中间件应用-json-urlencoded解析" class="headerlink" title="中间件应用-json-urlencoded解析"></a>中间件应用-json-urlencoded解析</h3><blockquote><p>注册express内置的<code>body-parser</code>；使用<code>req.body</code>接收参数；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用body-parser  express内置成函数 即直接注册</span></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">json</span>());  <span class="comment">//解析 JSON数据</span></span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">urlencoded</span>(&#123;<span class="attr">extended</span>:<span class="literal">true</span>&#125;)); <span class="comment">//解析 x-www-form-urlencoded 数据</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">const</span> info = req.<span class="property">body</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(info);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;使用req.body获取body参数&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>关于express.urlencoded({extended:true})中的extended：</p></blockquote><ul><li>true:  那么对urlencoded进行解析时,他使用的是第三方库：qs</li><li>false：那么对urlencoded进行解析时,他使用的是node内置模块：querystring</li></ul><h3 id="中间件应用-form-data解析"><a href="#中间件应用-form-data解析" class="headerlink" title="中间件应用-form-data解析"></a>中间件应用-form-data解析</h3><blockquote><p>form-data解析：一般用于上传图片文件；</p><p>express框架没有内置的解析中间件，但是有官方的库<code>multer</code>，需要下载安装一下：<code>npm i multer</code></p></blockquote><h4 id="初步使用"><a href="#初步使用" class="headerlink" title="初步使用"></a>初步使用</h4><p><img src="https://img.fsllala.top/1671354368858formdata1.png" alt="multer初使用"></p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//不推荐此写法</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"><span class="comment">// 引入multer,是个函数</span></span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;multer&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用multer函数</span></span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 表示 form-data中普通的数据</span></span><br><span class="line">app.<span class="title function_">use</span>(upload.<span class="title function_">any</span>());</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/upload&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">body</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;用户上传成功&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>但是上方写法存在个问题：<a href="https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md">https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md</a>  写着”永远不要将 multer 作为全局中间件使用，因为恶意用户可以上传文件到一个你没有预料到的路由，应该只在你需要处理上传文件的路由上使用；</p></blockquote><ul><li>如果你需要处理一个只有文本域的表单，你应当使用 <code>.none()</code>:</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="comment">// 引入multer,是个函数</span></span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;multer&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>()</span><br><span class="line"><span class="comment">// 如果你需要处理一个只有文本域的表单，你应当使用 .none():</span></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/upload&quot;</span>, upload.<span class="title function_">none</span>(), <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// req.body 包含文本域</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">body</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;用户上传成功~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h4 id="文件上传"><a href="#文件上传" class="headerlink" title="文件上传"></a>文件上传</h4><blockquote><p>上传图片文件，并且将上传的图片文件放在服务器中某位置：</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="comment">// 引入multer,是个函数</span></span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;multer&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 表示将上传的文件指定地址存放，若没有该文件，则创建文件夹(启动服务的时候,没有的话会创建文件夹)</span></span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>(&#123;</span><br><span class="line">    <span class="attr">dest</span>: <span class="string">&quot;./uploadImg/&quot;</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里使用连续中间件，upload.single(&#x27;img&#x27;)表示解析单个文件夹，且key值为 &quot;img&quot;,</span></span><br><span class="line"><span class="comment">// 进行处理后，传递给后面的中间件 next ，然后返回结果给客户端</span></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/upload&quot;</span>, upload.<span class="title function_">single</span>(<span class="string">&quot;avatar&quot;</span>), <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// req.file 是 `avatar` 文件的信息</span></span><br><span class="line">    <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">file</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">body</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;用户上传成功~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>此时我们图片没有后缀，而且不能直接打开，我们给图片添加后缀和重命名</p></blockquote><ul><li>磁盘存储引擎 (DiskStorage)：磁盘存储引擎可以让你控制文件的存储。</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;multer&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> storage = multer.<span class="title function_">diskStorage</span>(&#123;</span><br><span class="line">    <span class="comment">// 回调函数写法 这个文件夹必须自己手动创建,没有的话也不会自动创建;</span></span><br><span class="line">    <span class="attr">destination</span>: <span class="function">(<span class="params">req, file, cb</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="string">&quot;./uploadImg/&quot;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">filename</span>: <span class="function">(<span class="params">req, file, cb</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// path.extname(file.originalname))获取文件的拓展名 .png .jpg .gif</span></span><br><span class="line">        <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="title class_">Date</span>.<span class="title function_">now</span>() + path.<span class="title function_">extname</span>(file.<span class="property">originalname</span>));</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>(&#123;</span><br><span class="line">    storage</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里使用连续中间件，upload.single(&#x27;img&#x27;)表示解析单个文件夹，且key值为 &quot;img&quot;,</span></span><br><span class="line"><span class="comment">// 进行处理后，传递给后面的中间件 next ，然后返回结果给客户端</span></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/upload&quot;</span>, upload.<span class="title function_">single</span>(<span class="string">&quot;avatar&quot;</span>), <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// req.file 是 `avatar` 文件的信息</span></span><br><span class="line">    <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">file</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">body</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;用户上传成功~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>这里使用diskStorage处理文件上传的地址和文件名，其中 destination可以为字符串也可以为函数，但是两者使用上有区别：</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 为上传的文件添加后缀和文件名</span></span><br><span class="line"><span class="keyword">const</span> storage = multer.<span class="title function_">diskStorage</span>(&#123;</span><br><span class="line">    <span class="comment">// cb是callback回调函数的缩写</span></span><br><span class="line">    <span class="comment">// destination:(req,file,cb)=&gt;&#123;</span></span><br><span class="line">    <span class="comment">//     cb(null,&#x27;./uploadImg/&#x27;)</span></span><br><span class="line">    <span class="comment">// &#125;,</span></span><br><span class="line">    <span class="attr">destination</span>:<span class="string">&quot;./uploadImg/&quot;</span>,</span><br><span class="line">    <span class="attr">filename</span>:<span class="function">(<span class="params">req,file,cb</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="comment">// 文件名取 时间戳和原文件的后缀名进行组合</span></span><br><span class="line">        <span class="title function_">cb</span>(<span class="literal">null</span>,<span class="title class_">Date</span>.<span class="title function_">now</span>()+path.<span class="title function_">extname</span>(file.<span class="property">originalname</span>))</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ul><li>字符串，将根据字符串，创建文件夹；</li><li>回调函数中，传入的字符串表示文件放入的地址不会创建该文件夹（若没有的话）；</li></ul><blockquote><p>上面是一次上传一张图片的情形，其实还有一次上传多张图片的情形；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> multer  = <span class="built_in">require</span>(<span class="string">&#x27;multer&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>(&#123; <span class="attr">dest</span>: <span class="string">&#x27;uploads/&#x27;</span> &#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>()</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&#x27;/profile&#x27;</span>, upload.<span class="title function_">single</span>(<span class="string">&#x27;avatar&#x27;</span>), <span class="keyword">function</span> (<span class="params">req, res, next</span>) &#123;</span><br><span class="line">  <span class="comment">// req.file 是 `avatar` 文件的信息</span></span><br><span class="line">  <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&#x27;/photos/upload&#x27;</span>, upload.<span class="title function_">array</span>(<span class="string">&#x27;photos&#x27;</span>, <span class="number">12</span>), <span class="keyword">function</span> (<span class="params">req, res, next</span>) &#123;</span><br><span class="line">  <span class="comment">// req.files 是 `photos` 文件数组的信息</span></span><br><span class="line">  <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> cpUpload = upload.<span class="title function_">fields</span>([&#123; <span class="attr">name</span>: <span class="string">&#x27;avatar&#x27;</span>, <span class="attr">maxCount</span>: <span class="number">1</span> &#125;, &#123; <span class="attr">name</span>: <span class="string">&#x27;gallery&#x27;</span>, <span class="attr">maxCount</span>: <span class="number">8</span> &#125;])</span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&#x27;/cool-profile&#x27;</span>, cpUpload, <span class="keyword">function</span> (<span class="params">req, res, next</span>) &#123;</span><br><span class="line">  <span class="comment">// req.files 是一个对象 (String -&gt; Array) 键是文件名，值是文件数组</span></span><br><span class="line">  <span class="comment">//</span></span><br><span class="line">  <span class="comment">// 例如：</span></span><br><span class="line">  <span class="comment">//  req.files[&#x27;avatar&#x27;][0] -&gt; File</span></span><br><span class="line">  <span class="comment">//  req.files[&#x27;gallery&#x27;] -&gt; Array</span></span><br><span class="line">  <span class="comment">//</span></span><br><span class="line">  <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ul><li>.single(fieldname)：接受一个以 fieldname 命名的文件。这个文件的信息保存在 req.file。</li><li>.array(fieldname[, maxCount])：接受一个以 fieldname 命名的文件数组。可以配置 maxCount 来限制上传的最大数量。这些文件的信息保存在 req.files。</li><li>.fields(fields)：接受指定 fields 的混合文件。这些文件的信息保存在 req.files；fields 应该是一个对象数组，应该具有 name 和可选的 maxCount 属性。</li><li>array和fields区别是：array上传的多张文件名的key都是一样的，而fields因为参数是数组对象，所以可以多种key，每个key又能限制count；</li></ul><p>Example:</p><figure class="highlight js"><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">[</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;avatar&#x27;</span>, <span class="attr">maxCount</span>: <span class="number">1</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;gallery&#x27;</span>, <span class="attr">maxCount</span>: <span class="number">8</span> &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure><blockquote><p>upload.any()不作为全局，作为局部中间件；也可以接收一次上传多张的情形，而且还不用指定key；更加自由；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&quot;multer&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">//这个文件夹必须自己手动创建,没有的话也不会自动创建;</span></span><br><span class="line"><span class="keyword">const</span> storage = multer.<span class="title function_">diskStorage</span>(&#123;</span><br><span class="line">    <span class="attr">destination</span>:<span class="string">&quot;./uploadImg/&quot;</span>,</span><br><span class="line">    <span class="attr">filename</span>: <span class="function">(<span class="params">req, file, cb</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// path.extname(file.originalname))获取文件的拓展名 .png .jpg .gif</span></span><br><span class="line">        <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="title class_">Date</span>.<span class="title function_">now</span>() + path.<span class="title function_">extname</span>(file.<span class="property">originalname</span>));</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>(&#123;</span><br><span class="line">    storage</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// upload.any()作为中间件;</span></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/upload&quot;</span>, upload.<span class="title function_">any</span>(), <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// req.files 是文件的信息 数组对象</span></span><br><span class="line">    <span class="comment">// req.body 将具有文本域数据，如果存在的话</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">files</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">body</span>);</span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;用户上传成功~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="GET请求参数解析"><a href="#GET请求参数解析" class="headerlink" title="GET请求参数解析"></a>GET请求参数解析</h2><h3 id="params解析-路由参数"><a href="#params解析-路由参数" class="headerlink" title="params解析(路由参数)"></a>params解析(路由参数)</h3><blockquote><p>&#x2F;products&#x2F;:id&#x2F;:name的这种的(<a href="http://127.0.0.1:3000/products/fsl/forward)%EF%BC%8C%E7%94%A8req.params%E8%A7%A3%E6%9E%90">http://127.0.0.1:3000/products/fsl/forward)，用req.params解析</a></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express= <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">//  http://127.0.0.1:3000/products/fsl/forward</span></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/products/:id/:name&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">// 通过req.params接收,接收的是一个对象</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">params</span>); <span class="comment">//&#123; id: &#x27;fsl&#x27;, name: &#x27;forward&#x27; &#125;</span></span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;商品的详情数据~&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="query解析"><a href="#query解析" class="headerlink" title="query解析"></a>query解析</h3><blockquote><p>&#x2F;login这种的(<a href="http://127.0.0.1:3000/login?name=fsl&age=18)%EF%BC%8C%E7%94%A8req.query%E8%A7%A3%E6%9E%90">http://127.0.0.1:3000/login?name=fsl&amp;age=18)，用req.query解析</a></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express= <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// http://127.0.0.1:3000/login?name=fsl&amp;age=18</span></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/login&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">// 通过req.query接收,接收的是一个对象</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">query</span>); <span class="comment">// &#123; name: &#x27;fsl&#x27;, age: &#x27;18&#x27; &#125;</span></span><br><span class="line">    res.<span class="title function_">end</span>(<span class="string">&quot;登陆成功~&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="响应数据"><a href="#响应数据" class="headerlink" title="响应数据"></a>响应数据</h2><ul><li>res.end(xxx)：只能返回 字符串、buffer数据等，不能返回 JSON，数组；</li><li>res.json(xxx)：可以传入很多的类型：object、array、string、boolean、number、null等，它们会被转换成<br>json格式返回；</li><li>res.status(200)：用于设置状态码</li></ul><h2 id="express路由"><a href="#express路由" class="headerlink" title="express路由"></a>express路由</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 举个例子： 这些所有的放在一个app文件里,接口看起来是有点重复的,而且太多了,不方便管理;</span></span><br><span class="line"><span class="comment"> *     请求所有的用户信息：get     /users</span></span><br><span class="line"><span class="comment"> *     请求某个用户信息：  get     /users/:id</span></span><br><span class="line"><span class="comment"> *     创建某个用户信息：  post    /users   body &#123;username:fsllala,password:123&#125;</span></span><br><span class="line"><span class="comment"> *     删除某个用户信息：  delete  /users/:id</span></span><br><span class="line"><span class="comment"> *     更新某个用户信息：  put     /users/:id</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure><blockquote><p>我们可以使用 <code>express.Router()</code>来创建一个路由处理程序：一个Router实例拥有完整的中间件和路由系统；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//新建一个router文件夹,下面创建user.js</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> router = express.<span class="title class_">Router</span>();  <span class="comment">//express.Router()是个函数</span></span><br><span class="line"></span><br><span class="line">router.<span class="title function_">get</span>(<span class="string">&quot;/users&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>([<span class="string">&quot;why&quot;</span>, <span class="string">&quot;kobe&quot;</span>, <span class="string">&quot;fsllala&quot;</span>]);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.<span class="title function_">get</span>(<span class="string">&quot;/users/:id&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(<span class="string">`<span class="subst">$&#123;req.params.id&#125;</span>用户的信息`</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.<span class="title function_">post</span>(<span class="string">&quot;/users&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(<span class="string">&quot;create user success~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = router;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在app文件里引入路由</span></span><br><span class="line"><span class="keyword">const</span> express= <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;./router/user.js&quot;</span>)</span><br><span class="line">app.<span class="title function_">use</span>(userRouter);  <span class="comment">//注册路由</span></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p>注册路由的时候,可以有两个参数 app.use(“&#x2F;公共路由”，”路由”)；上面的写法就可以写成下面这样：</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//新建一个router文件夹,下面创建user.js</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> router = express.<span class="title class_">Router</span>();  <span class="comment">//express.Router()是个函数</span></span><br><span class="line"></span><br><span class="line">router.<span class="title function_">get</span>(<span class="string">&quot;/&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>([<span class="string">&quot;why&quot;</span>, <span class="string">&quot;kobe&quot;</span>, <span class="string">&quot;fsllala&quot;</span>]);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.<span class="title function_">get</span>(<span class="string">&quot;/:id&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(<span class="string">`<span class="subst">$&#123;req.params.id&#125;</span>用户的信息`</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.<span class="title function_">post</span>(<span class="string">&quot;/&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(<span class="string">&quot;create user success~&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = router;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//在app文件里引入路由</span></span><br><span class="line"><span class="keyword">const</span> express= <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"><span class="keyword">const</span> userRouter = <span class="built_in">require</span>(<span class="string">&quot;./router/user.js&quot;</span>)</span><br><span class="line">app.<span class="title function_">use</span>(<span class="string">&quot;/users&quot;</span>,userRouter);  <span class="comment">//注册路由</span></span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running port is 3000~&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="服务端错误处理"><a href="#服务端错误处理" class="headerlink" title="服务端错误处理"></a>服务端错误处理</h2><ul><li>处理方式一：不易维护(后期修改code码&#x2F;message信息)；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">json</span>());</span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">urlencoded</span>(&#123; <span class="attr">extended</span>: <span class="literal">true</span> &#125;));</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; username, password &#125; = req.<span class="property">body</span>;</span><br><span class="line">  <span class="keyword">if</span> (!username || !password) &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(&#123;</span><br><span class="line">      <span class="attr">code</span>: -<span class="number">1001</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;请输入用户名或密码！&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (username !== <span class="string">&quot;fsllala&quot;</span> || password !== <span class="string">&quot;123456&quot;</span>) &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(&#123;</span><br><span class="line">      <span class="attr">code</span>: -<span class="number">1002</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;用户名或密码错误！&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(&#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;登录成功！&quot;</span>,</span><br><span class="line">      <span class="attr">token</span>:<span class="string">&quot;fasfasf123123aff&quot;</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running~&quot;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><ul><li>处理方式二：通过next()传递给下一个匹配的中间件，其中next可以传递 <strong>错误信息</strong>；</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">json</span>());</span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">urlencoded</span>(&#123; <span class="attr">extended</span>: <span class="literal">true</span> &#125;));</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">post</span>(<span class="string">&quot;/login&quot;</span>, <span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; username, password &#125; = req.<span class="property">body</span>;</span><br><span class="line">  <span class="keyword">if</span> (!username || !password) &#123;</span><br><span class="line">    <span class="comment">// 通过next传递给下一个匹配的中间件,其中next可以传递 错误信息;</span></span><br><span class="line">    <span class="title function_">next</span>(-<span class="number">1001</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (username !== <span class="string">&quot;fsllala&quot;</span> || password !== <span class="string">&quot;123456&quot;</span>) &#123;</span><br><span class="line">    <span class="title function_">next</span>(-<span class="number">1002</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    res.<span class="title function_">json</span>(&#123;</span><br><span class="line">      <span class="attr">code</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;登录成功！&quot;</span>,</span><br><span class="line">      <span class="attr">token</span>:<span class="string">&quot;fasfasf123123aff&quot;</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 处理错误的中间件 (err接收next传递的错误信息)</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="function">(<span class="params">err, req, res, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// console.log(err);</span></span><br><span class="line">  <span class="keyword">const</span> code = err;</span><br><span class="line">  <span class="keyword">let</span> message = <span class="string">&quot;未知错误&quot;</span>;</span><br><span class="line">  <span class="keyword">switch</span> (err) &#123;</span><br><span class="line">    <span class="keyword">case</span> -<span class="number">1001</span>:</span><br><span class="line">      message = <span class="string">&quot;请输入用户名或密码！&quot;</span>;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> -<span class="number">1002</span>:</span><br><span class="line">      message = <span class="string">&quot;用户名或密码错误！&quot;</span>;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  res.<span class="title function_">json</span>(&#123; code, message &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;server is running~&quot;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md">multer官方文档</a></p><p><a href="https://blog.csdn.net/qq_64841572/article/details/126254419?spm=1001.2014.3001.5506">Node中间件multer库学习</a></p>]]></content>
       
       
       <categories>
@@ -272,7 +272,7 @@
       <link href="/articles/4dee6fea.html"/>
       <url>/articles/4dee6fea.html</url>
       
-        <content type="html"><![CDATA[<h1 id="什么是模块化？"><a href="#什么是模块化？" class="headerlink" title="什么是模块化？"></a>什么是模块化？</h1><ul><li>模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块；</li><li>将一个项目拆分为若干块，每块之间以一定的形式进行通信，而每块内部的内容都是独立的；</li></ul><h1 id="模块化的好处？"><a href="#模块化的好处？" class="headerlink" title="模块化的好处？"></a>模块化的好处？</h1><ul><li>抽离公共的代码，提高了代码的维护性和复用性；</li><li>隔离作用域，避免变量的冲突；</li><li>将一个复杂的系统分解为多个子模块，便于开发和维护；</li></ul><h1 id="常用的模块化规范"><a href="#常用的模块化规范" class="headerlink" title="常用的模块化规范?"></a>常用的模块化规范?</h1><h2 id="CommonJs"><a href="#CommonJs" class="headerlink" title="CommonJs"></a>CommonJs</h2><blockquote><p>nodejs使用的commonJs规范；在nodejs中，有且仅有一个入口文件(启动文件)，而开发一个应用肯定会涉及多个文件配合，因此，nodejs对模块化的需求比浏览器端要大得多；</p></blockquote><h3 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h3><ul><li>CommonJs最大的特点就是同步加载；(缺点)</li><li>每一个文件都是一个Module对象，通过关键字module.exports或者exports来暴露内容，并可以通过require来引入指定模块；</li><li>模块一旦加载一次之后就会被缓存；</li></ul><h3 id="工作环境"><a href="#工作环境" class="headerlink" title="工作环境"></a>工作环境</h3><blockquote><p>服务端；两个原因使CommonJs无法在浏览器端使用：</p></blockquote><ul><li>根本原因：CommonJs中使用了Node的api，无法在浏览器中运行。</li><li>直接原因：作为一门同步加载的模块规范必须得在require完全加载好之后才能执行下一步，所以会有阻塞的情况，在网络状态比较差的情况下，就会导致浏览器的假死现象。(对于服务端，require的等待时间是硬盘读取时间，而对于浏览器端来说，这取决于网速的快慢。)</li></ul><h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><ul><li>使用 <code>exports.x </code>或者<code>module.exports</code>暴露模块；<code>exports</code>是一个空对象&#x3D;&#x3D;&gt;<code>exports=&#123;&#125;</code></li><li>通过<code>require</code>来完成对模块的引入；</li><li>如果一个JS文件存在<code>exports</code>或<code>require</code>，该JS文件就是一个模块，拥有独立的作用域；</li></ul><h4 id="使用exports-x暴露；"><a href="#使用exports-x暴露；" class="headerlink" title="使用exports.x暴露；"></a>使用<code>exports.x</code>暴露；</h4><blockquote><p>使用<code>exports.x</code>暴露；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m1.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Animal</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age</span>=<span class="number">10</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// exports是个对象;给exports对象上面添加属性进行导出;</span></span><br><span class="line"><span class="comment">// exports.x</span></span><br><span class="line"><span class="built_in">exports</span>.<span class="property">num1</span>=num; <span class="comment">//num1是随便取的;尽量和变量名保持一致</span></span><br><span class="line"><span class="built_in">exports</span>.<span class="property">sum</span>=sum; </span><br><span class="line"><span class="built_in">exports</span>.<span class="property">Animal</span>=<span class="title class_">Animal</span>; </span><br></pre></td></tr></table></figure><blockquote><p>使用<code>require</code>引入<code>m1.js</code>；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建index.js文件用来引入m1.js</span></span><br><span class="line"><span class="comment">// require函数的返回值是个对象,是exports对象;</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">M1</span> = <span class="built_in">require</span>(<span class="string">&quot;./m1.js&quot;</span>); <span class="comment">//这行代码的本质是  M1=exports;(对象赋值,其实是地址)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M1</span>); <span class="comment">//&#123; num1: 10, sum: [Function: sum], Animal: [class Animal] &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M1</span>.<span class="property">num1</span>); <span class="comment">//10</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M1</span>.<span class="title function_">sum</span>(<span class="number">2</span>,<span class="number">3</span>)); <span class="comment">// 5</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">DOG</span> = <span class="keyword">new</span> <span class="variable constant_">M1</span>.<span class="title class_">Animal</span>(); <span class="comment">//const声明的常量 建议大写;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">DOG</span>.<span class="property">age</span>) <span class="comment">//10</span></span><br></pre></td></tr></table></figure><h4 id="使用module-exports暴露多个；"><a href="#使用module-exports暴露多个；" class="headerlink" title="使用module.exports暴露多个；"></a>使用<code>module.exports</code>暴露多个；</h4><blockquote><p>使用<code>module.exports</code>暴露；在一个自定义模块中，默认情况下，module.exports&#x3D;{}；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m2.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Animal</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age</span>=<span class="number">10</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// methods 1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports是个对象;给module.exports对象上面添加属性进行导出;</span></span><br><span class="line"><span class="comment">// module.exports.num=num;</span></span><br><span class="line"><span class="comment">// module.exports.sum=sum;</span></span><br><span class="line"><span class="comment">// module.exports.Animal=Animal;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//methods 2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports导出方式  es6对象简写形式(上面声明了变量,下面json的键值对名一样,可以简写;(值就是上面的变量))</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    num,</span><br><span class="line">    sum,</span><br><span class="line">    <span class="title class_">Animal</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>require</code>引入<code>m2.js</code>；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 两种方式的引入方式都是一样的，都是require(&quot;相对路径&quot;);</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">M2</span> = <span class="built_in">require</span>(<span class="string">&quot;./m2.js&quot;</span>); <span class="comment">//require函数的返回值是个对象,是module.exports对象;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>); <span class="comment">//&#123; num: 10, sum: [Function: sum], Animal: [class Animal] &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>.<span class="property">num</span>); <span class="comment">//10</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>.<span class="title function_">sum</span>(<span class="number">5</span>,<span class="number">3</span>)); <span class="comment">//8</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">CAT</span> = <span class="keyword">new</span> <span class="variable constant_">M2</span>.<span class="title class_">Animal</span>(); <span class="comment">//const声明的常量 建议大写;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">CAT</span>.<span class="property">age</span>) <span class="comment">//10</span></span><br></pre></td></tr></table></figure><h4 id="使用module-exports暴露单个；"><a href="#使用module-exports暴露单个；" class="headerlink" title="使用module.exports暴露单个；"></a>使用<code>module.exports</code>暴露单个；</h4><blockquote><p>使用<code>module.exports</code>暴露；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m2.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Animal</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age</span>=<span class="number">10</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports是个对象,但是不加属性,直接导出;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=sum;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>require</code>引入<code>m2.js</code>；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">M2</span> = <span class="built_in">require</span>(<span class="string">&quot;./m2.js&quot;</span>); </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>); <span class="comment">//[Function: sum] 这里的M2就是m2.js里导出的东西,就不再是对象了;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// console.log(M2.sum(5,3)); // TypeError: M2.sum is not a function</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">M2</span>(<span class="number">5</span>,<span class="number">3</span>)); <span class="comment">// 8</span></span><br></pre></td></tr></table></figure><h4 id="module-exports与exports有什么关系或者区别呢？"><a href="#module-exports与exports有什么关系或者区别呢？" class="headerlink" title="module.exports与exports有什么关系或者区别呢？"></a>module.exports与exports有什么关系或者区别呢？</h4><ul><li>我们追根溯源，通过维基百科中对CommonJS规范的解析：<ul><li>CommonJS中是没有module.exports的概念的；</li><li>但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是<br>module；</li><li>所以在Node中真正用于导出的其实根本不是exports，而是module.exports；</li><li>因为module才是导出的真正实现者；</li></ul></li><li>但是，为什么exports也可以导出呢？<ul><li>这是因为module对象的exports属性是exports对象的一个引用；</li><li>也就是说 module.exports &#x3D; exports &#x3D; index.js中的M2；</li></ul></li></ul><h5 id="module对象"><a href="#module对象" class="headerlink" title="module对象"></a>module对象</h5><blockquote><p>Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是module；</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/module.png" alt="module"></p><h5 id="module-exports-对象"><a href="#module-exports-对象" class="headerlink" title="module.exports 对象"></a>module.exports 对象</h5><blockquote><p>module.exports&#x3D;xxx的过程其实是引用赋值(浅拷贝)的过程；exports(也是一个对象)之所以可以导出，就是把exports对象的地址赋值给了module.exports，借助module.exports导出；</p></blockquote><ul><li>使用 require() 方法导入模块时，导入的结果，永远以 最下面的module.exports 指向的对象为准；</li></ul><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m2.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports是个对象;给module.exports对象上面添加属性进行导出;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">num</span>=num;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">sum</span>=sum;</span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports开辟了新的引用类型地址;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;开辟新的引用类型地址&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">M2</span> = <span class="built_in">require</span>(<span class="string">&quot;./m2.js&quot;</span>); <span class="comment">//require函数的返回值是个对象,是module.exports对象;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>); <span class="comment">//&#123; name: &#x27;开辟新的引用类型地址&#x27; &#125;</span></span><br></pre></td></tr></table></figure><ul><li>上面的module.exports属性要是在下面结果就不一样了;相当于在原来的对象上添加了属性;</li></ul><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m2.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports开辟了新的引用类型地址;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;开辟新的引用类型地址&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports是个对象;给上面的那个module.exports对象上面添加属性进行导出;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">num</span>=num;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">sum</span>=sum;</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">M2</span> = <span class="built_in">require</span>(<span class="string">&quot;./m2.js&quot;</span>); <span class="comment">//require函数的返回值是个对象,是module.exports对象;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>); <span class="comment">//&#123; name: &#x27;开辟新的引用类型地址&#x27;, num: 10, sum: [Function: sum] &#125;</span></span><br></pre></td></tr></table></figure><ul><li>exports与module.exports同时导出</li></ul><blockquote><p>由于真正用于导出的其实根本不是exports，而是module.exports；所以同时导出的时候module.exports开辟了新的内存地址，exports就相当于被架空了;</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m2.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">num</span>=num;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">sum</span>=sum;</span><br><span class="line"></span><br><span class="line"><span class="built_in">exports</span>=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;开辟新的引用类型地址&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">M2</span> = <span class="built_in">require</span>(<span class="string">&quot;./m2.js&quot;</span>); <span class="comment">//require函数的返回值是个对象,是module.exports对象;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>); <span class="comment">//&#123; num: 10, sum: [Function: sum] &#125;</span></span><br></pre></td></tr></table></figure><h2 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h2><h3 id="特点-1"><a href="#特点-1" class="headerlink" title="特点"></a>特点</h3><ul><li>ES6最大的特点是按需加载；</li></ul><h3 id="工作环境-1"><a href="#工作环境-1" class="headerlink" title="工作环境"></a>工作环境</h3><ul><li>是浏览器端与服务器端通用的模块化开发规范；</li></ul><h3 id="使用-1"><a href="#使用-1" class="headerlink" title="使用"></a>使用</h3><ul><li>目前浏览器使用如下方式引入一个ES6模块文件：<code>  &lt;script src=&quot;入口文件&quot; type=&quot;module&quot;&gt;&lt;/script&gt;</code></li><li>使用 <code>export </code>或者<code>export default</code>暴露模块；</li><li>通过<code>import</code>来完成对模块的引入；</li><li><code>export defalut</code>每个js模块里面只能有一个；<code>export</code>可以有多个；</li></ul><h4 id="使用export直接导出"><a href="#使用export直接导出" class="headerlink" title="使用export直接导出"></a>使用<code>export</code>直接导出</h4><blockquote><p>使用<code>export</code>暴露；</p></blockquote><figure class="highlight js"><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"><span class="comment">// 新建m1.js文件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> name = <span class="string">&quot;张三&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> age = <span class="number">12</span>;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>import &#123;xx,xx&#125; from &quot;xxx&quot;</code>引入；</p></blockquote><figure class="highlight js"><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"><span class="comment">// 新建index.js文件用来引入m1.js</span></span><br><span class="line"><span class="keyword">import</span> &#123;name,age&#125; <span class="keyword">from</span> <span class="string">&quot;./m1.js&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name);<span class="comment">//张三</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(age);<span class="comment">//12</span></span><br></pre></td></tr></table></figure><h4 id="使用export一起导出"><a href="#使用export一起导出" class="headerlink" title="使用export一起导出"></a>使用<code>export</code>一起导出</h4><blockquote><p>使用<code>export&#123;&#125;</code>暴露；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m1.js文件</span></span><br><span class="line"><span class="keyword">let</span> name = <span class="string">&quot;张三&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">13</span>;</span><br><span class="line"><span class="keyword">export</span> &#123;</span><br><span class="line">    name,</span><br><span class="line">    age</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>import &#123;xx,xx&#125; from &quot;xxx&quot;</code>引入；</p></blockquote><figure class="highlight js"><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"><span class="comment">// 新建index.js文件用来引入m1.js</span></span><br><span class="line"><span class="keyword">import</span> &#123;name,age&#125; <span class="keyword">from</span> <span class="string">&quot;./m1.js&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name);<span class="comment">//张三</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(age);<span class="comment">//13</span></span><br></pre></td></tr></table></figure><h4 id="使用export-default导出"><a href="#使用export-default导出" class="headerlink" title="使用export default导出"></a>使用<code>export default</code>导出</h4><blockquote><p>使用<code>export default</code>暴露；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m1.js文件</span></span><br><span class="line"><span class="keyword">let</span> name = <span class="string">&quot;张三&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">14</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;  <span class="comment">//默认导出：一个js文件中只能写一次</span></span><br><span class="line">    name,</span><br><span class="line">    age</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>import xxx from &quot;xxx&quot;</code>引入；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建index.js文件用来引入m1.js</span></span><br><span class="line"><span class="keyword">import</span> m1 <span class="keyword">from</span> <span class="string">&quot;./m1.js&quot;</span>; <span class="comment">//import 后面的 m1 是随便起的;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1); <span class="comment">//&#123; name: &#x27;张三&#x27;, age: 14 &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1.<span class="property">name</span>);<span class="comment">//张三</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1.<span class="property">age</span>);<span class="comment">//14</span></span><br></pre></td></tr></table></figure><h4 id="混用"><a href="#混用" class="headerlink" title="混用"></a>混用</h4><blockquote><p>使用<code>export</code>和<code>export default</code>暴露；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m1.js文件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> email = <span class="string">&quot;nodeJs@163.com&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> name = <span class="string">&quot;张三&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;  <span class="comment">//默认导出一个js文件中只能写一次</span></span><br><span class="line">    name,</span><br><span class="line">    age</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>import xxx,&#123;xx,xx&#125; from &quot;xxx&quot;</code>引入；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建index.js文件用来引入m1.js</span></span><br><span class="line"><span class="keyword">import</span> m1,&#123;email&#125; <span class="keyword">from</span> <span class="string">&quot;./m1.js&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1); <span class="comment">//&#123; name: &#x27;张三&#x27;, age: 18 &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1.<span class="property">name</span>);<span class="comment">//张三</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1.<span class="property">age</span>);<span class="comment">//18</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(email);<span class="comment">//nodeJs@163.com</span></span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><ul><li><a href="https://blog.csdn.net/qq_32019935/article/details/124619833">模块化规范</a></li><li><a href="https://blog.csdn.net/icemwj/article/details/119606468?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~ESLANDING~default-2-119606468-blog-124619833.pc_relevant_landingrelevant&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~ESLANDING~default-2-119606468-blog-124619833.pc_relevant_landingrelevant&utm_relevant_index=5">了解模块化的相关规范</a></li><li><a href="https://www.jianshu.com/p/296446c457c2">模块化规范</a></li><li><a href="https://www.jianshu.com/p/58f49f69a2fb">commonjs 与 ES6 模块化</a></li><li><a href="https://blog.csdn.net/yezhihaobk/article/details/125225290">Node.js 模块化 module.exports 和 exports 的使用</a></li></ul>]]></content>
+        <content type="html"><![CDATA[<h1 id="什么是模块化？"><a href="#什么是模块化？" class="headerlink" title="什么是模块化？"></a>什么是模块化？</h1><ul><li>模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块；</li><li>将一个项目拆分为若干块，每块之间以一定的形式进行通信，而每块内部的内容都是独立的；</li></ul><h1 id="模块化的好处？"><a href="#模块化的好处？" class="headerlink" title="模块化的好处？"></a>模块化的好处？</h1><ul><li>抽离公共的代码，提高了代码的维护性和复用性；</li><li>隔离作用域，避免变量的冲突；</li><li>将一个复杂的系统分解为多个子模块，便于开发和维护；</li></ul><h1 id="常用的模块化规范"><a href="#常用的模块化规范" class="headerlink" title="常用的模块化规范?"></a>常用的模块化规范?</h1><h2 id="CommonJs"><a href="#CommonJs" class="headerlink" title="CommonJs"></a>CommonJs</h2><blockquote><p>nodejs使用的commonJs规范；在nodejs中，有且仅有一个入口文件(启动文件)，而开发一个应用肯定会涉及多个文件配合，因此，nodejs对模块化的需求比浏览器端要大得多；</p></blockquote><h3 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h3><ul><li>CommonJs最大的特点就是同步加载；(缺点)</li><li>每一个文件都是一个Module对象，通过关键字module.exports或者exports来暴露内容，并可以通过require来引入指定模块；</li><li>模块一旦加载一次之后就会被缓存；</li></ul><h3 id="工作环境"><a href="#工作环境" class="headerlink" title="工作环境"></a>工作环境</h3><blockquote><p>服务端；两个原因使CommonJs无法在浏览器端使用：</p></blockquote><ul><li>根本原因：CommonJs中使用了Node的api，无法在浏览器中运行。</li><li>直接原因：作为一门同步加载的模块规范必须得在require完全加载好之后才能执行下一步，所以会有阻塞的情况，在网络状态比较差的情况下，就会导致浏览器的假死现象。(对于服务端，require的等待时间是硬盘读取时间，而对于浏览器端来说，这取决于网速的快慢。)</li></ul><h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><ul><li>使用 <code>exports.x </code>或者<code>module.exports</code>暴露模块；<code>exports</code>是一个空对象&#x3D;&#x3D;&gt;<code>exports=&#123;&#125;</code></li><li>通过<code>require</code>来完成对模块的引入；</li><li>如果一个JS文件存在<code>exports</code>或<code>require</code>，该JS文件就是一个模块，拥有独立的作用域；</li></ul><h4 id="使用exports-x暴露；"><a href="#使用exports-x暴露；" class="headerlink" title="使用exports.x暴露；"></a>使用<code>exports.x</code>暴露；</h4><blockquote><p>使用<code>exports.x</code>暴露；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m1.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Animal</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age</span>=<span class="number">10</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// exports是个对象;给exports对象上面添加属性进行导出;</span></span><br><span class="line"><span class="comment">// exports.x</span></span><br><span class="line"><span class="built_in">exports</span>.<span class="property">num1</span>=num; <span class="comment">//num1是随便取的;尽量和变量名保持一致</span></span><br><span class="line"><span class="built_in">exports</span>.<span class="property">sum</span>=sum; </span><br><span class="line"><span class="built_in">exports</span>.<span class="property">Animal</span>=<span class="title class_">Animal</span>; </span><br></pre></td></tr></table></figure><blockquote><p>使用<code>require</code>引入<code>m1.js</code>；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建index.js文件用来引入m1.js</span></span><br><span class="line"><span class="comment">// require函数的返回值是个对象,是exports对象;</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">M1</span> = <span class="built_in">require</span>(<span class="string">&quot;./m1.js&quot;</span>); <span class="comment">//这行代码的本质是  M1=exports;(对象赋值,其实是地址)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M1</span>); <span class="comment">//&#123; num1: 10, sum: [Function: sum], Animal: [class Animal] &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M1</span>.<span class="property">num1</span>); <span class="comment">//10</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M1</span>.<span class="title function_">sum</span>(<span class="number">2</span>,<span class="number">3</span>)); <span class="comment">// 5</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">DOG</span> = <span class="keyword">new</span> <span class="variable constant_">M1</span>.<span class="title class_">Animal</span>(); <span class="comment">//const声明的常量 建议大写;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">DOG</span>.<span class="property">age</span>) <span class="comment">//10</span></span><br></pre></td></tr></table></figure><h4 id="使用module-exports暴露多个；"><a href="#使用module-exports暴露多个；" class="headerlink" title="使用module.exports暴露多个；"></a>使用<code>module.exports</code>暴露多个；</h4><blockquote><p>使用<code>module.exports</code>暴露；在一个自定义模块中，默认情况下，module.exports&#x3D;{}；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m2.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Animal</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age</span>=<span class="number">10</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// methods 1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports是个对象;给module.exports对象上面添加属性进行导出;</span></span><br><span class="line"><span class="comment">// module.exports.num=num;</span></span><br><span class="line"><span class="comment">// module.exports.sum=sum;</span></span><br><span class="line"><span class="comment">// module.exports.Animal=Animal;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//methods 2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports导出方式  es6对象简写形式(上面声明了变量,下面json的键值对名一样,可以简写;(值就是上面的变量))</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    num,</span><br><span class="line">    sum,</span><br><span class="line">    <span class="title class_">Animal</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>require</code>引入<code>m2.js</code>；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 两种方式的引入方式都是一样的，都是require(&quot;相对路径&quot;);</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">M2</span> = <span class="built_in">require</span>(<span class="string">&quot;./m2.js&quot;</span>); <span class="comment">//require函数的返回值是个对象,是module.exports对象;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>); <span class="comment">//&#123; num: 10, sum: [Function: sum], Animal: [class Animal] &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>.<span class="property">num</span>); <span class="comment">//10</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>.<span class="title function_">sum</span>(<span class="number">5</span>,<span class="number">3</span>)); <span class="comment">//8</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">CAT</span> = <span class="keyword">new</span> <span class="variable constant_">M2</span>.<span class="title class_">Animal</span>(); <span class="comment">//const声明的常量 建议大写;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">CAT</span>.<span class="property">age</span>) <span class="comment">//10</span></span><br></pre></td></tr></table></figure><h4 id="使用module-exports暴露单个；"><a href="#使用module-exports暴露单个；" class="headerlink" title="使用module.exports暴露单个；"></a>使用<code>module.exports</code>暴露单个；</h4><blockquote><p>使用<code>module.exports</code>暴露；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m2.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Animal</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age</span>=<span class="number">10</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports是个对象,但是不加属性,直接导出;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=sum;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>require</code>引入<code>m2.js</code>；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">M2</span> = <span class="built_in">require</span>(<span class="string">&quot;./m2.js&quot;</span>); </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>); <span class="comment">//[Function: sum] 这里的M2就是m2.js里导出的东西,就不再是对象了;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// console.log(M2.sum(5,3)); // TypeError: M2.sum is not a function</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">M2</span>(<span class="number">5</span>,<span class="number">3</span>)); <span class="comment">// 8</span></span><br></pre></td></tr></table></figure><h4 id="module-exports与exports有什么关系或者区别呢？"><a href="#module-exports与exports有什么关系或者区别呢？" class="headerlink" title="module.exports与exports有什么关系或者区别呢？"></a>module.exports与exports有什么关系或者区别呢？</h4><ul><li>我们追根溯源，通过维基百科中对CommonJS规范的解析：<ul><li>CommonJS中是没有module.exports的概念的；</li><li>但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是<br>module；</li><li>所以在Node中真正用于导出的其实根本不是exports，而是module.exports；</li><li>因为module才是导出的真正实现者；</li></ul></li><li>但是，为什么exports也可以导出呢？<ul><li>这是因为module对象的exports属性是exports对象的一个引用；</li><li>也就是说 module.exports &#x3D; exports &#x3D; index.js中的M2；</li></ul></li></ul><h5 id="module对象"><a href="#module对象" class="headerlink" title="module对象"></a>module对象</h5><blockquote><p>Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是module；</p></blockquote><p><img src="https://img.fsllala.top/module.png" alt="module"></p><h5 id="module-exports-对象"><a href="#module-exports-对象" class="headerlink" title="module.exports 对象"></a>module.exports 对象</h5><blockquote><p>module.exports&#x3D;xxx的过程其实是引用赋值(浅拷贝)的过程；exports(也是一个对象)之所以可以导出，就是把exports对象的地址赋值给了module.exports，借助module.exports导出；</p></blockquote><ul><li>使用 require() 方法导入模块时，导入的结果，永远以 最下面的module.exports 指向的对象为准；</li></ul><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m2.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports是个对象;给module.exports对象上面添加属性进行导出;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">num</span>=num;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">sum</span>=sum;</span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports开辟了新的引用类型地址;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;开辟新的引用类型地址&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">M2</span> = <span class="built_in">require</span>(<span class="string">&quot;./m2.js&quot;</span>); <span class="comment">//require函数的返回值是个对象,是module.exports对象;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>); <span class="comment">//&#123; name: &#x27;开辟新的引用类型地址&#x27; &#125;</span></span><br></pre></td></tr></table></figure><ul><li>上面的module.exports属性要是在下面结果就不一样了;相当于在原来的对象上添加了属性;</li></ul><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m2.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports开辟了新的引用类型地址;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;开辟新的引用类型地址&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// module.exports是个对象;给上面的那个module.exports对象上面添加属性进行导出;</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">num</span>=num;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">sum</span>=sum;</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">M2</span> = <span class="built_in">require</span>(<span class="string">&quot;./m2.js&quot;</span>); <span class="comment">//require函数的返回值是个对象,是module.exports对象;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>); <span class="comment">//&#123; name: &#x27;开辟新的引用类型地址&#x27;, num: 10, sum: [Function: sum] &#125;</span></span><br></pre></td></tr></table></figure><ul><li>exports与module.exports同时导出</li></ul><blockquote><p>由于真正用于导出的其实根本不是exports，而是module.exports；所以同时导出的时候module.exports开辟了新的内存地址，exports就相当于被架空了;</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m2.js文件</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">num</span>=num;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span>.<span class="property">sum</span>=sum;</span><br><span class="line"></span><br><span class="line"><span class="built_in">exports</span>=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;开辟新的引用类型地址&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">M2</span> = <span class="built_in">require</span>(<span class="string">&quot;./m2.js&quot;</span>); <span class="comment">//require函数的返回值是个对象,是module.exports对象;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">M2</span>); <span class="comment">//&#123; num: 10, sum: [Function: sum] &#125;</span></span><br></pre></td></tr></table></figure><h2 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h2><h3 id="特点-1"><a href="#特点-1" class="headerlink" title="特点"></a>特点</h3><ul><li>ES6最大的特点是按需加载；</li></ul><h3 id="工作环境-1"><a href="#工作环境-1" class="headerlink" title="工作环境"></a>工作环境</h3><ul><li>是浏览器端与服务器端通用的模块化开发规范；</li></ul><h3 id="使用-1"><a href="#使用-1" class="headerlink" title="使用"></a>使用</h3><ul><li>目前浏览器使用如下方式引入一个ES6模块文件：<code>  &lt;script src=&quot;入口文件&quot; type=&quot;module&quot;&gt;&lt;/script&gt;</code></li><li>使用 <code>export </code>或者<code>export default</code>暴露模块；</li><li>通过<code>import</code>来完成对模块的引入；</li><li><code>export defalut</code>每个js模块里面只能有一个；<code>export</code>可以有多个；</li></ul><h4 id="使用export直接导出"><a href="#使用export直接导出" class="headerlink" title="使用export直接导出"></a>使用<code>export</code>直接导出</h4><blockquote><p>使用<code>export</code>暴露；</p></blockquote><figure class="highlight js"><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"><span class="comment">// 新建m1.js文件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> name = <span class="string">&quot;张三&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> age = <span class="number">12</span>;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>import &#123;xx,xx&#125; from &quot;xxx&quot;</code>引入；</p></blockquote><figure class="highlight js"><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"><span class="comment">// 新建index.js文件用来引入m1.js</span></span><br><span class="line"><span class="keyword">import</span> &#123;name,age&#125; <span class="keyword">from</span> <span class="string">&quot;./m1.js&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name);<span class="comment">//张三</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(age);<span class="comment">//12</span></span><br></pre></td></tr></table></figure><h4 id="使用export一起导出"><a href="#使用export一起导出" class="headerlink" title="使用export一起导出"></a>使用<code>export</code>一起导出</h4><blockquote><p>使用<code>export&#123;&#125;</code>暴露；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m1.js文件</span></span><br><span class="line"><span class="keyword">let</span> name = <span class="string">&quot;张三&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">13</span>;</span><br><span class="line"><span class="keyword">export</span> &#123;</span><br><span class="line">    name,</span><br><span class="line">    age</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>import &#123;xx,xx&#125; from &quot;xxx&quot;</code>引入；</p></blockquote><figure class="highlight js"><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"><span class="comment">// 新建index.js文件用来引入m1.js</span></span><br><span class="line"><span class="keyword">import</span> &#123;name,age&#125; <span class="keyword">from</span> <span class="string">&quot;./m1.js&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name);<span class="comment">//张三</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(age);<span class="comment">//13</span></span><br></pre></td></tr></table></figure><h4 id="使用export-default导出"><a href="#使用export-default导出" class="headerlink" title="使用export default导出"></a>使用<code>export default</code>导出</h4><blockquote><p>使用<code>export default</code>暴露；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m1.js文件</span></span><br><span class="line"><span class="keyword">let</span> name = <span class="string">&quot;张三&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">14</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;  <span class="comment">//默认导出：一个js文件中只能写一次</span></span><br><span class="line">    name,</span><br><span class="line">    age</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>import xxx from &quot;xxx&quot;</code>引入；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建index.js文件用来引入m1.js</span></span><br><span class="line"><span class="keyword">import</span> m1 <span class="keyword">from</span> <span class="string">&quot;./m1.js&quot;</span>; <span class="comment">//import 后面的 m1 是随便起的;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1); <span class="comment">//&#123; name: &#x27;张三&#x27;, age: 14 &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1.<span class="property">name</span>);<span class="comment">//张三</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1.<span class="property">age</span>);<span class="comment">//14</span></span><br></pre></td></tr></table></figure><h4 id="混用"><a href="#混用" class="headerlink" title="混用"></a>混用</h4><blockquote><p>使用<code>export</code>和<code>export default</code>暴露；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建m1.js文件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> email = <span class="string">&quot;nodeJs@163.com&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> name = <span class="string">&quot;张三&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;  <span class="comment">//默认导出一个js文件中只能写一次</span></span><br><span class="line">    name,</span><br><span class="line">    age</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>使用<code>import xxx,&#123;xx,xx&#125; from &quot;xxx&quot;</code>引入；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建index.js文件用来引入m1.js</span></span><br><span class="line"><span class="keyword">import</span> m1,&#123;email&#125; <span class="keyword">from</span> <span class="string">&quot;./m1.js&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1); <span class="comment">//&#123; name: &#x27;张三&#x27;, age: 18 &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1.<span class="property">name</span>);<span class="comment">//张三</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m1.<span class="property">age</span>);<span class="comment">//18</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(email);<span class="comment">//nodeJs@163.com</span></span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><ul><li><a href="https://blog.csdn.net/qq_32019935/article/details/124619833">模块化规范</a></li><li><a href="https://blog.csdn.net/icemwj/article/details/119606468?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~ESLANDING~default-2-119606468-blog-124619833.pc_relevant_landingrelevant&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~ESLANDING~default-2-119606468-blog-124619833.pc_relevant_landingrelevant&utm_relevant_index=5">了解模块化的相关规范</a></li><li><a href="https://www.jianshu.com/p/296446c457c2">模块化规范</a></li><li><a href="https://www.jianshu.com/p/58f49f69a2fb">commonjs 与 ES6 模块化</a></li><li><a href="https://blog.csdn.net/yezhihaobk/article/details/125225290">Node.js 模块化 module.exports 和 exports 的使用</a></li></ul>]]></content>
       
       
       <categories>
@@ -303,7 +303,7 @@
       <link href="/articles/7cf6476b.html"/>
       <url>/articles/7cf6476b.html</url>
       
-        <content type="html"><![CDATA[<h1 id="nvm"><a href="#nvm" class="headerlink" title="nvm"></a>nvm</h1><h2 id="nvm是什么"><a href="#nvm是什么" class="headerlink" title="nvm是什么?"></a>nvm是什么?</h2><blockquote><p><code>nvm(node.js version manager)</code>即<code>nodejs</code>版本管理器；可以简单操作node版本的切换、安装、查看。。。等等；与<code>npm</code>不同的是，<code>npm</code>是依赖包的管理工具。</p></blockquote><h2 id="为什么需要用nvm"><a href="#为什么需要用nvm" class="headerlink" title="为什么需要用nvm?"></a>为什么需要用nvm?</h2><blockquote><p><code>node</code>有很多的版本，切记，并不是新版一出现，旧的版本就不去用了；在不同的项目开发过程中，可能需要我们电脑中同时存在多个不同版本的<code>node</code>；这时候就需要一个软件，来更好的管理这些不同版本的<code>node</code>同时存在于我们的电脑中。</p></blockquote><h2 id="nvm的安装"><a href="#nvm的安装" class="headerlink" title="nvm的安装"></a>nvm的安装</h2><ol><li><p>安装<code>nvm</code>之前先删除现有的<code>node</code>；在控制面板里面删了就行；</p></li><li><p><code>nvm</code><a href="https://github.com/coreybutler/nvm-windows">下载链接</a>；</p></li><li><p>安装路径建议不要换，因为用默认的路径环境变量就自动配置好了；即一直<code>Next</code>，啥也不要改；</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvmVersion.png" alt="nvm安装"></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvmVersion2.png" alt="nvm安装"></p></li><li><p>通过<code>nvm -v</code>查看是否安装成功了；通过<code>nvm list</code>查看当前电脑上安装了那些版本的<code>node</code>(因为刚才卸载了，所以现在是<code>No installations recognized.</code>)</p></li><li><p>配置<code>nvm</code>：复制下面代码(配置镜像源)到<code>nvm</code>文件位置(过程3的第一张图)，点开<code>setting.txt</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">node_mirror</span>: <span class="attr">https</span>:<span class="comment">//npmmirror.com/mirrors/node/</span></span><br><span class="line"><span class="attr">npm_mirror</span>: <span class="attr">https</span>:<span class="comment">//npmmirror.com/mirrors/npm/</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvmLocation.png" alt="配置淘宝镜像"></p></li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvmLocation2.png" alt="配置淘宝镜像"></p><h2 id="nvm命令"><a href="#nvm命令" class="headerlink" title="nvm命令"></a>nvm命令</h2><ul><li><code>nvm version</code>：查看<code>nvm</code>版本</li><li><code>nvm list</code>：查看当前安装的<code>Node.js</code>的所有版本**(常用)**</li><li><code>nvm install 版本号</code>：安装指定版本的<code>Node.js</code><strong>(常用)</strong></li><li><code>nvm uninstall 版本号</code>：卸载指定版本的<code>Node.js</code></li><li><code>nvm use 版本号</code>：选择指定版本的<code>Node.js</code><strong>(常用)</strong></li></ul><h2 id="安装node"><a href="#安装node" class="headerlink" title="安装node"></a>安装node</h2><ul><li><p><a href="https://nodejs.org/en/">官网链接</a></p></li><li><p>以管理员方式运行<code>cmd</code>命令行</p><ol><li>安装对应的版本</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">nvm install 版本号 <span class="comment">// 例如：nvm install 16.18.0</span></span><br></pre></td></tr></table></figure><ol start="2"><li>切换到安装的版本</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">nvm use 版本号     <span class="comment">// 切换到使用指定的nodejs版本</span></span><br></pre></td></tr></table></figure><ol start="3"><li>检测是否切换完成，新开一个<code>cmd</code></li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvmNode.png" alt="安装Node"></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/v1.png" alt="查看当前node版本"></p></li></ul><ol start="4"><li>多个版本的<code>node</code>切换：这里又安装了10.15.0版本的<code>node</code>，通过<code>nvm use 10.15.0</code>切换了版本号；</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/vv.png" alt="安装多个node版本"></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/v2.png" alt="查看当前node版本"></p><h1 id="npm"><a href="#npm" class="headerlink" title="npm"></a>npm</h1><blockquote><p>npm（Node Package Manager），Node.js 的包管理器，安装 Node.js 之后自带 npm，无需单独安装。💓</p></blockquote><h2 id="查看版本"><a href="#查看版本" class="headerlink" title="查看版本"></a>查看版本</h2><p>输入 npm -v 来查看当前 npm 的版本</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/npm1673616215090.png" alt="npm"></p><h1 id="nrm"><a href="#nrm" class="headerlink" title="nrm"></a>nrm</h1><blockquote><p>nrm（<a href="https://github.com/Pana/nrm">NPM registry manager</a>），国内使用 npm 官方源来安装包的时候比较慢，所以经常会需要修改 npm 源地址。npm 倒是提供了修改源的方法，但是 nrm 更加方便快捷。💓</p></blockquote><h2 id="nrm的安装"><a href="#nrm的安装" class="headerlink" title="nrm的安装"></a>nrm的安装</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g nrm   <span class="comment">// 使用 npm 全局安装</span></span><br></pre></td></tr></table></figure><h2 id="nrm命令"><a href="#nrm命令" class="headerlink" title="nrm命令"></a>nrm命令</h2><ul><li><code>nrm ls</code>：查看全部镜像源(按道理说应该有*来展示目前所用的源，但现在没，原因见下文)</li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nrm1673616739921.png" alt="nrm"></p><ul><li><code>nrm current</code>：查看当前源(按道理说应该有目前所用的源，但现在没，原因见下文)</li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nvm51673617677730.png" alt="nrm"></p><ul><li><code>nrm use taobao</code>：切换成<code> taobao</code> 镜像源</li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nrm21673616980714.png" alt="nrm"></p><ul><li><code>nrm test</code>：测速并查看当前所用源(前面有*)</li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nrm31673617213610.png" alt="nrm"></p><ul><li><code>nrm -h</code>：查看帮助</li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nrm41673617362687.png" alt="nrm"></p><h2 id="解决nrm-ls命令没有-（星号）的问题"><a href="#解决nrm-ls命令没有-（星号）的问题" class="headerlink" title="解决nrm ls命令没有*（星号）的问题"></a>解决nrm ls命令没有*（星号）的问题</h2><blockquote><p>当在终端里执行<code>nrm ls</code>指令查看我们的镜像源时，我发现列表中并没有星号存在，一般情况下星号表示目前所处的镜像源，但是没有星号我们根本不知道目前在使用哪个镜像源；并且执行<code>nrm current</code>指令也没有反应。（可能是版本的问题）</p></blockquote><ol><li>需要执行一下命令。重装版本一下即可解决，可能下载的时间会有点长请耐心等待即可。</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install <span class="title class_">Pana</span>/nrm -g</span><br></pre></td></tr></table></figure><ol start="2"><li>验证</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/nrm61673618254488.png" alt="nrm"></p><h1 id="相关链接"><a href="#相关链接" class="headerlink" title="相关链接"></a>相关链接</h1><p><a href="https://blog.csdn.net/QWERTYQ16/article/details/124497532">nvm的简介、安装、使用（简单明了）</a></p><p><a href="https://blog.csdn.net/qq_34996079/article/details/122934045">nvm 切换node报错 exit status 1: �ܾ����ʡ�</a></p><p><a href="https://tzy1997.com/articles/hexo1606/">nvm与npm与nrm</a></p><p><a href="https://blog.csdn.net/qq_36958916/article/details/113653457">nrm详解</a></p><p><a href="https://blog.csdn.net/liuxin_hello/article/details/127801953">nrm - 源间切换</a></p>]]></content>
+        <content type="html"><![CDATA[<h1 id="nvm"><a href="#nvm" class="headerlink" title="nvm"></a>nvm</h1><h2 id="nvm是什么"><a href="#nvm是什么" class="headerlink" title="nvm是什么?"></a>nvm是什么?</h2><blockquote><p><code>nvm(node.js version manager)</code>即<code>nodejs</code>版本管理器；可以简单操作node版本的切换、安装、查看。。。等等；与<code>npm</code>不同的是，<code>npm</code>是依赖包的管理工具。</p></blockquote><h2 id="为什么需要用nvm"><a href="#为什么需要用nvm" class="headerlink" title="为什么需要用nvm?"></a>为什么需要用nvm?</h2><blockquote><p><code>node</code>有很多的版本，切记，并不是新版一出现，旧的版本就不去用了；在不同的项目开发过程中，可能需要我们电脑中同时存在多个不同版本的<code>node</code>；这时候就需要一个软件，来更好的管理这些不同版本的<code>node</code>同时存在于我们的电脑中。</p></blockquote><h2 id="nvm的安装"><a href="#nvm的安装" class="headerlink" title="nvm的安装"></a>nvm的安装</h2><ol><li><p>安装<code>nvm</code>之前先删除现有的<code>node</code>；在控制面板里面删了就行；</p></li><li><p><code>nvm</code><a href="https://github.com/coreybutler/nvm-windows">下载链接</a>；</p></li><li><p>安装路径建议不要换，因为用默认的路径环境变量就自动配置好了；即一直<code>Next</code>，啥也不要改；</p><p><img src="https://img.fsllala.top/nvmVersion.png" alt="nvm安装"></p><p><img src="https://img.fsllala.top/nvmVersion2.png" alt="nvm安装"></p></li><li><p>通过<code>nvm -v</code>查看是否安装成功了；通过<code>nvm list</code>查看当前电脑上安装了那些版本的<code>node</code>(因为刚才卸载了，所以现在是<code>No installations recognized.</code>)</p></li><li><p>配置<code>nvm</code>：复制下面代码(配置镜像源)到<code>nvm</code>文件位置(过程3的第一张图)，点开<code>setting.txt</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">node_mirror</span>: <span class="attr">https</span>:<span class="comment">//npmmirror.com/mirrors/node/</span></span><br><span class="line"><span class="attr">npm_mirror</span>: <span class="attr">https</span>:<span class="comment">//npmmirror.com/mirrors/npm/</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/nvmLocation.png" alt="配置淘宝镜像"></p></li></ol><p><img src="https://img.fsllala.top/nvmLocation2.png" alt="配置淘宝镜像"></p><h2 id="nvm命令"><a href="#nvm命令" class="headerlink" title="nvm命令"></a>nvm命令</h2><ul><li><code>nvm version</code>：查看<code>nvm</code>版本</li><li><code>nvm list</code>：查看当前安装的<code>Node.js</code>的所有版本**(常用)**</li><li><code>nvm install 版本号</code>：安装指定版本的<code>Node.js</code><strong>(常用)</strong></li><li><code>nvm uninstall 版本号</code>：卸载指定版本的<code>Node.js</code></li><li><code>nvm use 版本号</code>：选择指定版本的<code>Node.js</code><strong>(常用)</strong></li></ul><h2 id="安装node"><a href="#安装node" class="headerlink" title="安装node"></a>安装node</h2><ul><li><p><a href="https://nodejs.org/en/">官网链接</a></p></li><li><p>以管理员方式运行<code>cmd</code>命令行</p><ol><li>安装对应的版本</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">nvm install 版本号 <span class="comment">// 例如：nvm install 16.18.0</span></span><br></pre></td></tr></table></figure><ol start="2"><li>切换到安装的版本</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">nvm use 版本号     <span class="comment">// 切换到使用指定的nodejs版本</span></span><br></pre></td></tr></table></figure><ol start="3"><li>检测是否切换完成，新开一个<code>cmd</code></li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/nvmNode.png" alt="安装Node"></p><p><img src="https://img.fsllala.top/v1.png" alt="查看当前node版本"></p></li></ul><ol start="4"><li>多个版本的<code>node</code>切换：这里又安装了10.15.0版本的<code>node</code>，通过<code>nvm use 10.15.0</code>切换了版本号；</li></ol><p><img src="https://img.fsllala.top/vv.png" alt="安装多个node版本"></p><p><img src="https://img.fsllala.top/v2.png" alt="查看当前node版本"></p><h1 id="npm"><a href="#npm" class="headerlink" title="npm"></a>npm</h1><blockquote><p>npm（Node Package Manager），Node.js 的包管理器，安装 Node.js 之后自带 npm，无需单独安装。💓</p></blockquote><h2 id="查看版本"><a href="#查看版本" class="headerlink" title="查看版本"></a>查看版本</h2><p>输入 npm -v 来查看当前 npm 的版本</p><p><img src="https://img.fsllala.top/npm1673616215090.png" alt="npm"></p><h1 id="nrm"><a href="#nrm" class="headerlink" title="nrm"></a>nrm</h1><blockquote><p>nrm（<a href="https://github.com/Pana/nrm">NPM registry manager</a>），国内使用 npm 官方源来安装包的时候比较慢，所以经常会需要修改 npm 源地址。npm 倒是提供了修改源的方法，但是 nrm 更加方便快捷。💓</p></blockquote><h2 id="nrm的安装"><a href="#nrm的安装" class="headerlink" title="nrm的安装"></a>nrm的安装</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g nrm   <span class="comment">// 使用 npm 全局安装</span></span><br></pre></td></tr></table></figure><h2 id="nrm命令"><a href="#nrm命令" class="headerlink" title="nrm命令"></a>nrm命令</h2><ul><li><code>nrm ls</code>：查看全部镜像源(按道理说应该有*来展示目前所用的源，但现在没，原因见下文)</li></ul><p><img src="https://img.fsllala.top/nrm1673616739921.png" alt="nrm"></p><ul><li><code>nrm current</code>：查看当前源(按道理说应该有目前所用的源，但现在没，原因见下文)</li></ul><p><img src="https://img.fsllala.top/nvm51673617677730.png" alt="nrm"></p><ul><li><code>nrm use taobao</code>：切换成<code> taobao</code> 镜像源</li></ul><p><img src="https://img.fsllala.top/nrm21673616980714.png" alt="nrm"></p><ul><li><code>nrm test</code>：测速并查看当前所用源(前面有*)</li></ul><p><img src="https://img.fsllala.top/nrm31673617213610.png" alt="nrm"></p><ul><li><code>nrm -h</code>：查看帮助</li></ul><p><img src="https://img.fsllala.top/nrm41673617362687.png" alt="nrm"></p><h2 id="解决nrm-ls命令没有-（星号）的问题"><a href="#解决nrm-ls命令没有-（星号）的问题" class="headerlink" title="解决nrm ls命令没有*（星号）的问题"></a>解决nrm ls命令没有*（星号）的问题</h2><blockquote><p>当在终端里执行<code>nrm ls</code>指令查看我们的镜像源时，我发现列表中并没有星号存在，一般情况下星号表示目前所处的镜像源，但是没有星号我们根本不知道目前在使用哪个镜像源；并且执行<code>nrm current</code>指令也没有反应。（可能是版本的问题）</p></blockquote><ol><li>需要执行一下命令。重装版本一下即可解决，可能下载的时间会有点长请耐心等待即可。</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install <span class="title class_">Pana</span>/nrm -g</span><br></pre></td></tr></table></figure><ol start="2"><li>验证</li></ol><p><img src="https://img.fsllala.top/nrm61673618254488.png" alt="nrm"></p><h1 id="相关链接"><a href="#相关链接" class="headerlink" title="相关链接"></a>相关链接</h1><p><a href="https://blog.csdn.net/QWERTYQ16/article/details/124497532">nvm的简介、安装、使用（简单明了）</a></p><p><a href="https://blog.csdn.net/qq_34996079/article/details/122934045">nvm 切换node报错 exit status 1: �ܾ����ʡ�</a></p><p><a href="https://tzy1997.com/articles/hexo1606/">nvm与npm与nrm</a></p><p><a href="https://blog.csdn.net/qq_36958916/article/details/113653457">nrm详解</a></p><p><a href="https://blog.csdn.net/liuxin_hello/article/details/127801953">nrm - 源间切换</a></p>]]></content>
       
       
       <categories>
@@ -332,7 +332,7 @@
       <link href="/articles/f7f97ed.html"/>
       <url>/articles/f7f97ed.html</url>
       
-        <content type="html"><![CDATA[<h1 id="文件下载方式"><a href="#文件下载方式" class="headerlink" title="文件下载方式"></a>文件下载方式</h1><blockquote><p>前端涉及到的文件下载还是很多应用场景的，那么前端文件下载有多少种方式呢？每种方式有什么优缺点呢？下面就来一一介绍。</p></blockquote><h2 id="a标签"><a href="#a标签" class="headerlink" title="a标签"></a>a标签</h2><h3 id="定义与用法"><a href="#定义与用法" class="headerlink" title="定义与用法"></a>定义与用法</h3><ul><li>首先实现<code>download</code>功能，条件必须满足：所要下载的文件与<code>js</code>或当前页面同源。即<code>window.location.protocol</code>（传输协议）+<code>window.location.host</code>（域名）必须有，且一致；</li><li>如果是本地文件，请启动<strong>本地服务</strong>，使用<code>localhost</code>访问页面；</li><li>通过<code>a</code>标签的<code>download</code>属性来实现文件下载；download为h5中新增的a标签属性；download+href使a标签具备点击下载功能；</li><li><code>download</code>属性也可以设置一个值来规定下载文件的名称；若没有设置拓展名，浏览器将自动检测正确的拓展名(.img，.png、.pdf)；</li></ul><h3 id="兼容性测试及结果"><a href="#兼容性测试及结果" class="headerlink" title="兼容性测试及结果"></a>兼容性测试及结果</h3><ul><li>代码</li></ul><figure class="highlight html"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;./imgs/cs.jpg&quot;</span>&gt;</span>同源图片，不带download<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;./imgs/cs.jpg&quot;</span> <span class="attr">download</span>=<span class="string">&quot;cs&quot;</span>&gt;</span>同源图片，带download<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://www.erke.com/images/erker_logo.gif&quot;</span>&gt;</span>网络图片，不带download<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://www.erke.com/images/erker_logo.gif&quot;</span>  <span class="attr">download</span>=<span class="string">&quot;hxek&quot;</span>&gt;</span>网络图片，带download<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;./cs.zip&quot;</span> &gt;</span>本地zip文件，不带download<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;JavaScript:;&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;down(&#x27;./videos/cs.zip&#x27;)&quot;</span>&gt;</span>js放置a标签实现（html无法打开的文件格式）<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;JavaScript:;&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;down(&#x27;./imgs/cs.jpg&#x27;)&quot;</span>&gt;</span>js放置a标签实现（html可以打开的文件格式）<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;JavaScript:;&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;down(&#x27;https://codeload.github.com/LingerCareer/Just-learn-JS-this/zip/refs/heads/main&#x27;)&quot;</span>&gt;</span>js放置a标签实现（html不能打开的网络文件格式）<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;JavaScript:;&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;down(&#x27;https://www.erke.com/images/erker_logo.gif&#x27;)&quot;</span>&gt;</span>js放置a标签实现（html可以打开的网络文件格式）<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">down</span>(<span class="params">url</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> a = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;a&#x27;</span>);</span><br><span class="line">    a.<span class="property">href</span> = url;</span><br><span class="line">    a.<span class="property">download</span> = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    a.<span class="title function_">click</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>pc端浏览器兼容性</li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/download1675772980006.PNG" alt="download"></p><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul><li>html不支持的文件，无论同源还是不同源，有没有download属性，都会下载。</li><li>html支持的文件，同源且有download属性，除ie外都会下载。</li><li>html支持的文件，不同源，无论有无download属性，都不会下载，浏览器会直接跳转打开。</li></ul><h2 id="Blob对象"><a href="#Blob对象" class="headerlink" title="Blob对象"></a>Blob对象</h2><blockquote><p>场景：后端返回给前端<code>文件流</code>，前端通过<code>Blob</code>下载；文件流格式如下：</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/download1675766421440.png" alt="export"></p><h3 id="Blob对象-1"><a href="#Blob对象-1" class="headerlink" title="Blob对象"></a>Blob对象</h3><p>下面是<code>blob</code>对象的定义，来自<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob">MDN</a>：</p><blockquote><p><code>Blob</code>对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 <code>ReadableStream</code> 来用于数据操作。</p><p><code>Blob</code>表示的不一定是<code>JavaScript</code>原生格式的数据。<code>File</code> 接口基于 <code>Blob</code>，继承了<code>blob</code>的功能并将其扩展以支持用户系统上的文件。</p></blockquote><p><code>blob</code>对象是<code>html5</code>新增的对象，它的作用是用来存储二进制数据的，比如图片、视频、音频等，它的使用方法如下：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> &#123;<span class="type">Array</span>&#125; array 二进制数据</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> &#123;<span class="type">Object</span>&#125; options 配置项</span></span><br><span class="line"><span class="comment"> *      <span class="doctag">@param</span> &#123;<span class="type">String</span>&#125; options.type 文件类型，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。</span></span><br><span class="line"><span class="comment"> *      <span class="doctag">@param</span> &#123;<span class="type">String</span>&#125; options.endings 用于指定包含行结束符\n的字符串如何被写入。默认为transparent，表示不会修改行结束符。还可以指定为native，表示会将\n转换为\r\n。</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> blob = <span class="keyword">new</span> <span class="title class_">Blob</span>([], &#123; <span class="attr">type</span>: <span class="string">&#x27;&#x27;</span> &#125;)</span><br></pre></td></tr></table></figure><p>这里主要关注的是<code>type</code>属性，默认情况下，<code>blob</code>对象是没有<code>type</code>属性的，那么这个<code>Blob</code>就是一个无类型的<code>Blob</code>，文件不会损毁，但是无法被正常识别。</p><h3 id="URL-createObjectURL"><a href="#URL-createObjectURL" class="headerlink" title="URL.createObjectURL"></a>URL.createObjectURL</h3><p>下面是<code>blob</code>对象的定义，来自<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL">MDN</a>：</p><blockquote><p>URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。</p></blockquote><p>这个方法是用来创建一个<code>url</code>的，它的作用是把一个<code>blob</code>对象转换成一个<code>url</code>，这个<code>url</code>可以用来下载文件，也可以用来预览文件，代码如下：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> url = <span class="variable constant_">URL</span>.<span class="title function_">createObjectURL</span>(blob)</span><br></pre></td></tr></table></figure><p>这里需要注意的是，这个<code>url</code>的生命周期和创建它的窗口中的<code>document</code>绑定，也就是说，当我们的<code>document</code>被销毁后，这个<code>url</code>就会失效，会自动释放它们，但是为了获得最佳性能和内存使用状况，我们应该在安全的时机主动释放掉它们，代码如下：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable constant_">URL</span>.<span class="title function_">revokeObjectURL</span>(url)</span><br></pre></td></tr></table></figure><h3 id="下载文件流"><a href="#下载文件流" class="headerlink" title="下载文件流"></a>下载文件流</h3><h4 id="指定返回数据格式"><a href="#指定返回数据格式" class="headerlink" title="指定返回数据格式"></a>指定返回数据格式</h4><blockquote><p>首先指定返回数据格式为blob：<code>responseType: &#39;blob&#39;</code></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导出报表</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">getMeetRoomExport</span>(<span class="params">data</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">        <span class="attr">url</span>: <span class="string">`xxxxxx`</span>,</span><br><span class="line">        <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">        <span class="attr">responseType</span>:<span class="string">&quot;blob&quot;</span>,  <span class="comment">//一定要加这个,不然下载的文件打不开</span></span><br><span class="line">        data</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h4 id="响应头headers获取文件信息"><a href="#响应头headers获取文件信息" class="headerlink" title="响应头headers获取文件信息"></a>响应头<code>headers</code>获取文件信息</h4><blockquote><p>在响应数据<code>response.headers[&quot;content-disposition&quot;]</code>中获取文件信息；包含<strong>文件名</strong>和<strong>文件类型</strong>；如下图所示：</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/download21675767199385.png" alt="download"></p><p>可以在响应拦截器里面做数据处理：</p><ul><li>中文转码了，转回去；</li><li>将文件信息存到缓存，调用下载接口的时候获取文件信息；(给a标签的download设置文件名)</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//接收到响应数据并成功后的一些共有的处理</span></span><br><span class="line"><span class="keyword">if</span> (response.<span class="property">headers</span>[<span class="string">&quot;content-disposition&quot;</span>]) &#123;</span><br><span class="line">    <span class="keyword">const</span> temFileName =</span><br><span class="line">    response.<span class="property">headers</span>[<span class="string">&quot;content-disposition&quot;</span>].<span class="title function_">split</span>(<span class="string">&quot;filename=&quot;</span>)[<span class="number">1</span>];</span><br><span class="line">    <span class="keyword">const</span> intoName = <span class="title function_">revertUTF8</span>(temFileName.<span class="title function_">split</span>(<span class="string">&quot;-&quot;</span>)[<span class="number">0</span>]); <span class="comment">//decodeURI、decodeURIComponent都可以解决转码;</span></span><br><span class="line">    <span class="keyword">const</span> fileName = intoName + <span class="string">&quot;-&quot;</span> + temFileName.<span class="title function_">split</span>(<span class="string">&quot;-&quot;</span>)[<span class="number">1</span>];</span><br><span class="line">    sessionStorage.<span class="title function_">setItem</span>(<span class="string">&quot;fileName&quot;</span>, fileName);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h4 id="调用下载接口"><a href="#调用下载接口" class="headerlink" title="调用下载接口"></a>调用下载接口</h4><ul><li>我们可以打印一下res，是一个Blob对象；(如果接口没有设置responseType: ‘blob’，这里是后端返回的文件流)</li></ul><figure class="highlight plaintext"><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">getMeetRoomExport(this.exportParams).then((res) =&gt; &#123;</span><br><span class="line">console.log(res);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/download31675768232608.png" alt="download"></p><ul><li>接口请求</li></ul><blockquote><p>这里和后端商量是<code>docx</code>类型的文件，所以<code>type</code>值如下所示，其他类型的<code>type</code>值设置可参考<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">MDN</a>；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">getMeetRoomExport</span>(<span class="variable language_">this</span>.<span class="property">exportParams</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// console.log(res);</span></span><br><span class="line">  <span class="keyword">if</span> (res) &#123;</span><br><span class="line">      <span class="comment">//这里和后端商量是docx类型的文件,所以type值如下:</span></span><br><span class="line">    <span class="keyword">let</span> blob = <span class="keyword">new</span> <span class="title class_">Blob</span>([res], &#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="string">&quot;application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">let</span> url = <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">createObjectURL</span>(blob);</span><br><span class="line">    <span class="keyword">const</span> link = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;a&quot;</span>); <span class="comment">// 创建a标签</span></span><br><span class="line">    link.<span class="property">href</span> = url;</span><br><span class="line">    link.<span class="property">download</span> = sessionStorage.<span class="title function_">getItem</span>(<span class="string">&quot;fileName&quot;</span>); <span class="comment">// 重命名文件</span></span><br><span class="line">    link.<span class="title function_">click</span>();</span><br><span class="line">    <span class="variable constant_">URL</span>.<span class="title function_">revokeObjectURL</span>(url); <span class="comment">// 释放内存</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>至此，文件就会下载成功；</p><h3 id="下载拓展"><a href="#下载拓展" class="headerlink" title="下载拓展"></a>下载拓展</h3><blockquote><p>回到我们刚才下载的问题，我们是通过<code>blob</code>对象来解决，但是我们的<code>type</code>属性是写死的，如果在文件类型是确定的情况下是没问题的，但是如果这个接口就是下载文件的接口，文件可能是各种类型的，我们应该怎么处理？</p></blockquote><ul><li>和接口提供者进行协商，确定下载的文件的格式，然后前端将<code>type</code>写死；</li><li>通过<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">枚举</a>和响应头<code>response.headers[&quot;content-disposition&quot;]</code>来实现；</li></ul><h4 id="枚举方式"><a href="#枚举方式" class="headerlink" title="枚举方式"></a>枚举方式</h4><ol><li>新建config 写入blobType的对象</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> blobType = &#123;</span><br><span class="line">  <span class="attr">xls</span>: <span class="string">&#x27;application/vnd.ms-excel&#x27;</span>,</span><br><span class="line">  <span class="attr">xlsx</span>: <span class="string">&#x27;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&#x27;</span>,</span><br><span class="line">  <span class="attr">csv</span>: <span class="string">&#x27;text/csv&#x27;</span>,</span><br><span class="line">  <span class="attr">doc</span>: <span class="string">&#x27;application/msword&#x27;</span>,</span><br><span class="line">  <span class="attr">docx</span>: <span class="string">&#x27;application/vnd.openxmlformats-officedocument.wordprocessingml.document&#x27;</span>,</span><br><span class="line">  <span class="attr">pdf</span>: <span class="string">&#x27;application/pdf&#x27;</span>,</span><br><span class="line">  <span class="attr">ppt</span>: <span class="string">&#x27;application/vnd.ms-powerpoint&#x27;</span>,</span><br><span class="line">  <span class="attr">pptx</span>: <span class="string">&#x27;application/vnd.openxmlformats-officedocument.presentationml.presentation&#x27;</span>,</span><br><span class="line">  <span class="attr">png</span>: <span class="string">&#x27;image/png&#x27;</span>,</span><br><span class="line">  <span class="attr">gif</span>: <span class="string">&#x27;image/gif&#x27;</span>,</span><br><span class="line">  <span class="attr">jpeg</span>: <span class="string">&#x27;image/jpeg&#x27;</span>,</span><br><span class="line">  <span class="attr">jpg</span>: <span class="string">&#x27;image/jpeg&#x27;</span>,</span><br><span class="line">  <span class="attr">mp3</span>: <span class="string">&#x27;audio/mpeg&#x27;</span>,</span><br><span class="line">  <span class="attr">aac</span>: <span class="string">&#x27;audio/aac&#x27;</span>,</span><br><span class="line">  <span class="attr">html</span>: <span class="string">&#x27;text/html&#x27;</span>,</span><br><span class="line">  <span class="attr">css</span>: <span class="string">&#x27;text/css&#x27;</span>,</span><br><span class="line">  <span class="attr">js</span>: <span class="string">&#x27;text/javascript&#x27;</span>,</span><br><span class="line">  <span class="attr">json</span>: <span class="string">&#x27;application/json&#x27;</span>,</span><br><span class="line">  <span class="attr">abw</span>: <span class="string">&#x27;application/x-abiword&#x27;</span>,</span><br><span class="line">  <span class="attr">arc</span>: <span class="string">&#x27;application/x-freearc&#x27;</span>,</span><br><span class="line">  <span class="attr">avi</span>: <span class="string">&#x27;video/x-msvideo&#x27;</span>,</span><br><span class="line">  <span class="attr">azw</span>: <span class="string">&#x27;application/vnd.amazon.ebook&#x27;</span>,</span><br><span class="line">  <span class="attr">bin</span>: <span class="string">&#x27;application/octet-stream&#x27;</span>,</span><br><span class="line">  <span class="attr">bmp</span>: <span class="string">&#x27;image/bmp&#x27;</span>,</span><br><span class="line">  <span class="attr">bz</span>: <span class="string">&#x27;application/x-bzip&#x27;</span>,</span><br><span class="line">  <span class="attr">bz2</span>: <span class="string">&#x27;application/x-bzip2&#x27;</span>,</span><br><span class="line">  <span class="attr">csh</span>: <span class="string">&#x27;application/x-csh&#x27;</span>,</span><br><span class="line">  <span class="attr">eot</span>: <span class="string">&#x27;application/vnd.ms-fontobject&#x27;</span>,</span><br><span class="line">  <span class="attr">epub</span>: <span class="string">&#x27;application/epub+zip&#x27;</span>,</span><br><span class="line">  <span class="attr">htm</span>: <span class="string">&#x27;text/html&#x27;</span>,</span><br><span class="line">  <span class="attr">ico</span>: <span class="string">&#x27;image/vnd.microsoft.icon&#x27;</span>,</span><br><span class="line">  <span class="attr">ics</span>: <span class="string">&#x27;text/calendar&#x27;</span>,</span><br><span class="line">  <span class="attr">jar</span>: <span class="string">&#x27;application/java-archive&#x27;</span>,</span><br><span class="line">  <span class="attr">jsonld</span>: <span class="string">&#x27;application/ld+json&#x27;</span>,</span><br><span class="line">  <span class="attr">mid</span>: <span class="string">&#x27;audio/midi audio/x-midi&#x27;</span>,</span><br><span class="line">  <span class="attr">midi</span>: <span class="string">&#x27;audio/midi audio/x-midi&#x27;</span>,</span><br><span class="line">  <span class="attr">mjs</span>: <span class="string">&#x27;text/javascript&#x27;</span>,</span><br><span class="line">  <span class="attr">mpeg</span>: <span class="string">&#x27;video/mpeg&#x27;</span>,</span><br><span class="line">  <span class="attr">mpkg</span>: <span class="string">&#x27;application/vnd.apple.installer+xml&#x27;</span>,</span><br><span class="line">  <span class="attr">odp</span>: <span class="string">&#x27;application/vnd.oasis.opendocument.presentation&#x27;</span>,</span><br><span class="line">  <span class="attr">ods</span>: <span class="string">&#x27;application/vnd.oasis.opendocument.spreadsheet&#x27;</span>,</span><br><span class="line">  <span class="attr">odt</span>: <span class="string">&#x27;application/vnd.oasis.opendocument.text&#x27;</span>,</span><br><span class="line">  <span class="attr">oga</span>: <span class="string">&#x27;audio/ogg&#x27;</span>,</span><br><span class="line">  <span class="attr">ogv</span>: <span class="string">&#x27;video/ogg&#x27;</span>,</span><br><span class="line">  <span class="attr">ogx</span>: <span class="string">&#x27;application/ogg&#x27;</span>,</span><br><span class="line">  <span class="attr">otf</span>: <span class="string">&#x27;font/otf&#x27;</span>,</span><br><span class="line">  <span class="attr">rar</span>: <span class="string">&#x27;application/x-rar-compressed&#x27;</span>,</span><br><span class="line">  <span class="attr">rtf</span>: <span class="string">&#x27;application/rtf&#x27;</span>,</span><br><span class="line">  <span class="attr">sh</span>: <span class="string">&#x27;application/x-sh&#x27;</span>,</span><br><span class="line">  <span class="attr">svg</span>: <span class="string">&#x27;image/svg+xml&#x27;</span>,</span><br><span class="line">  <span class="attr">swf</span>: <span class="string">&#x27;application/x-shockwave-flash&#x27;</span>,</span><br><span class="line">  <span class="attr">tar</span>: <span class="string">&#x27;application/x-tar&#x27;</span>,</span><br><span class="line">  <span class="attr">tif</span>: <span class="string">&#x27;image/tiff&#x27;</span>,</span><br><span class="line">  <span class="attr">tiff</span>: <span class="string">&#x27;image/tiff&#x27;</span>,</span><br><span class="line">  <span class="attr">ttf</span>: <span class="string">&#x27;font/ttf&#x27;</span>,</span><br><span class="line">  <span class="attr">txt</span>: <span class="string">&#x27;text/plain&#x27;</span>,</span><br><span class="line">  <span class="attr">vsd</span>: <span class="string">&#x27;application/vnd.visio&#x27;</span>,</span><br><span class="line">  <span class="attr">wav</span>: <span class="string">&#x27;audio/wav&#x27;</span>,</span><br><span class="line">  <span class="attr">weba</span>: <span class="string">&#x27;audio/webm&#x27;</span>,</span><br><span class="line">  <span class="attr">webm</span>: <span class="string">&#x27;video/webm&#x27;</span>,</span><br><span class="line">  <span class="attr">webp</span>: <span class="string">&#x27;image/webp&#x27;</span>,</span><br><span class="line">  <span class="attr">woff</span>: <span class="string">&#x27;font/woff&#x27;</span>,</span><br><span class="line">  <span class="attr">woff2</span>: <span class="string">&#x27;font/woff2&#x27;</span>,</span><br><span class="line">  <span class="attr">xhtml</span>: <span class="string">&#x27;application/xhtml+xml&#x27;</span>,</span><br><span class="line">  <span class="attr">xml</span>: <span class="string">&#x27;text/xml&#x27;</span>,</span><br><span class="line">  <span class="attr">xul</span>: <span class="string">&#x27;application/vnd.mozilla.xul+xml&#x27;</span>,</span><br><span class="line">  <span class="attr">zip</span>: <span class="string">&#x27;application/zip&#x27;</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>引入，通过缓存中的文件名后缀确定type值；大致思路如下：</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.引入枚举</span></span><br><span class="line"><span class="keyword">import</span> &#123; blobType &#125; <span class="keyword">from</span> <span class="string">&#x27;@/config/global&#x27;</span>; </span><br><span class="line"><span class="comment">// 2.获取文件拓展名</span></span><br><span class="line"><span class="keyword">let</span> extName = sessionStorage.<span class="title function_">getItem</span>(<span class="string">&quot;fileName&quot;</span>).<span class="title function_">split</span>(<span class="string">&quot;.&quot;</span>)[<span class="number">1</span>];</span><br><span class="line"><span class="comment">// console.log(extName); // docx</span></span><br><span class="line"><span class="comment">// 3.设置type值</span></span><br><span class="line"><span class="keyword">let</span> blob = <span class="keyword">new</span> <span class="title class_">Blob</span>([res], &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">`<span class="subst">$&#123;blobType[file_type]&#125;</span>;charset=UTF-8`</span>,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h3 id="Blob拓展"><a href="#Blob拓展" class="headerlink" title="Blob拓展"></a>Blob拓展</h3><blockquote><p>不仅是后端传来的文件流可以下载，字符串、对象、数组等任意类型都可以下载；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 下载txt格式的文件;</span></span><br><span class="line"><span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;btn&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&quot;使用Blob对象下载文件&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> blob = <span class="keyword">new</span> <span class="title class_">Blob</span>([str], &#123; <span class="attr">type</span>: <span class="string">&quot;text/plain&quot;</span> &#125;)</span><br><span class="line">btn.<span class="property">onclick</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(blob); // 和文件流一样,是个Blob对象</span></span><br><span class="line">    <span class="keyword">let</span> url = <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">createObjectURL</span>(blob);</span><br><span class="line">    <span class="keyword">const</span> a = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">    a.<span class="property">href</span> = url;</span><br><span class="line">    a.<span class="property">download</span> = <span class="string">&quot;fsl&quot;</span>;</span><br><span class="line">    a.<span class="title function_">click</span>();</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">revokeObjectURL</span>(url);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>现象：点击按钮，下载名为 <code>fsl.txt</code>文件,内容为 “使用Blob对象下载文件”；</p><h3 id="URL-createObjectURL拓展"><a href="#URL-createObjectURL拓展" class="headerlink" title="URL.createObjectURL拓展"></a>URL.createObjectURL拓展</h3><blockquote><p>使用URL.createObjectURL实现图片本地预览</p></blockquote><p>这个方法是用来创建一个<code>url</code>的，它的作用是把一个<code>blob</code>对象转换成一个<code>url</code>，这个<code>url</code>可以用来下载文件，也可以用来预览文件；</p><figure class="highlight html"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;submit&quot;</span>&gt;</span>上传图片</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;file&quot;</span> <span class="attr">id</span>=<span class="string">&quot;submit&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;pic&quot;</span> <span class="attr">id</span>=<span class="string">&quot;img&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> submit = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;submit&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> img = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;img&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    img.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;none&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">    submit.<span class="property">onchange</span> = <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        img.<span class="property">src</span> = <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">createObjectURL</span>(e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>]);</span></span><br><span class="line"><span class="language-javascript">        img.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            img.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">            <span class="variable constant_">URL</span>.<span class="title function_">revokeObjectURL</span>(e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>]);</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://blog.csdn.net/u012881483/article/details/120042474">关于标签a的download属性兼容性总结</a></p><p><a href="https://www.cnblogs.com/ychizzz/p/13858427.html">利用Blob实现前端导出Excel,Doc等文件</a></p><p><a href="https://blog.csdn.net/Edwiin_9/article/details/125843637">js根据文件后缀动态获取blob的type,并将流文件转blob</a></p><p><a href="https://blog.csdn.net/ShinyRuo_/article/details/122165573">下载出来文件内容为空的解决方法</a></p><p><a href="https://blog.csdn.net/weixin_42912237/article/details/122063752?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-122063752-blog-122165573.pc_relevant_aa2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-122063752-blog-122165573.pc_relevant_aa2&utm_relevant_index=10">前端解析后端文件流并下载</a></p><p><a href="https://blog.csdn.net/Rainy_X/article/details/112610150?spm=1001.2014.3001.5502">js实现前端下载文件</a></p>]]></content>
+        <content type="html"><![CDATA[<h1 id="文件下载方式"><a href="#文件下载方式" class="headerlink" title="文件下载方式"></a>文件下载方式</h1><blockquote><p>前端涉及到的文件下载还是很多应用场景的，那么前端文件下载有多少种方式呢？每种方式有什么优缺点呢？下面就来一一介绍。</p></blockquote><h2 id="a标签"><a href="#a标签" class="headerlink" title="a标签"></a>a标签</h2><h3 id="定义与用法"><a href="#定义与用法" class="headerlink" title="定义与用法"></a>定义与用法</h3><ul><li>首先实现<code>download</code>功能，条件必须满足：所要下载的文件与<code>js</code>或当前页面同源。即<code>window.location.protocol</code>（传输协议）+<code>window.location.host</code>（域名）必须有，且一致；</li><li>如果是本地文件，请启动<strong>本地服务</strong>，使用<code>localhost</code>访问页面；</li><li>通过<code>a</code>标签的<code>download</code>属性来实现文件下载；download为h5中新增的a标签属性；download+href使a标签具备点击下载功能；</li><li><code>download</code>属性也可以设置一个值来规定下载文件的名称；若没有设置拓展名，浏览器将自动检测正确的拓展名(.img，.png、.pdf)；</li></ul><h3 id="兼容性测试及结果"><a href="#兼容性测试及结果" class="headerlink" title="兼容性测试及结果"></a>兼容性测试及结果</h3><ul><li>代码</li></ul><figure class="highlight html"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;./imgs/cs.jpg&quot;</span>&gt;</span>同源图片，不带download<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;./imgs/cs.jpg&quot;</span> <span class="attr">download</span>=<span class="string">&quot;cs&quot;</span>&gt;</span>同源图片，带download<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://www.erke.com/images/erker_logo.gif&quot;</span>&gt;</span>网络图片，不带download<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://www.erke.com/images/erker_logo.gif&quot;</span>  <span class="attr">download</span>=<span class="string">&quot;hxek&quot;</span>&gt;</span>网络图片，带download<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;./cs.zip&quot;</span> &gt;</span>本地zip文件，不带download<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;JavaScript:;&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;down(&#x27;./videos/cs.zip&#x27;)&quot;</span>&gt;</span>js放置a标签实现（html无法打开的文件格式）<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;JavaScript:;&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;down(&#x27;./imgs/cs.jpg&#x27;)&quot;</span>&gt;</span>js放置a标签实现（html可以打开的文件格式）<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;JavaScript:;&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;down(&#x27;https://codeload.github.com/LingerCareer/Just-learn-JS-this/zip/refs/heads/main&#x27;)&quot;</span>&gt;</span>js放置a标签实现（html不能打开的网络文件格式）<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;JavaScript:;&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;down(&#x27;https://www.erke.com/images/erker_logo.gif&#x27;)&quot;</span>&gt;</span>js放置a标签实现（html可以打开的网络文件格式）<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">down</span>(<span class="params">url</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> a = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;a&#x27;</span>);</span><br><span class="line">    a.<span class="property">href</span> = url;</span><br><span class="line">    a.<span class="property">download</span> = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    a.<span class="title function_">click</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>pc端浏览器兼容性</li></ul><p><img src="https://img.fsllala.top/download1675772980006.PNG" alt="download"></p><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul><li>html不支持的文件，无论同源还是不同源，有没有download属性，都会下载。</li><li>html支持的文件，同源且有download属性，除ie外都会下载。</li><li>html支持的文件，不同源，无论有无download属性，都不会下载，浏览器会直接跳转打开。</li></ul><h2 id="Blob对象"><a href="#Blob对象" class="headerlink" title="Blob对象"></a>Blob对象</h2><blockquote><p>场景：后端返回给前端<code>文件流</code>，前端通过<code>Blob</code>下载；文件流格式如下：</p></blockquote><p><img src="https://img.fsllala.top/download1675766421440.png" alt="export"></p><h3 id="Blob对象-1"><a href="#Blob对象-1" class="headerlink" title="Blob对象"></a>Blob对象</h3><p>下面是<code>blob</code>对象的定义，来自<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob">MDN</a>：</p><blockquote><p><code>Blob</code>对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 <code>ReadableStream</code> 来用于数据操作。</p><p><code>Blob</code>表示的不一定是<code>JavaScript</code>原生格式的数据。<code>File</code> 接口基于 <code>Blob</code>，继承了<code>blob</code>的功能并将其扩展以支持用户系统上的文件。</p></blockquote><p><code>blob</code>对象是<code>html5</code>新增的对象，它的作用是用来存储二进制数据的，比如图片、视频、音频等，它的使用方法如下：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> &#123;<span class="type">Array</span>&#125; array 二进制数据</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> &#123;<span class="type">Object</span>&#125; options 配置项</span></span><br><span class="line"><span class="comment"> *      <span class="doctag">@param</span> &#123;<span class="type">String</span>&#125; options.type 文件类型，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。</span></span><br><span class="line"><span class="comment"> *      <span class="doctag">@param</span> &#123;<span class="type">String</span>&#125; options.endings 用于指定包含行结束符\n的字符串如何被写入。默认为transparent，表示不会修改行结束符。还可以指定为native，表示会将\n转换为\r\n。</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> blob = <span class="keyword">new</span> <span class="title class_">Blob</span>([], &#123; <span class="attr">type</span>: <span class="string">&#x27;&#x27;</span> &#125;)</span><br></pre></td></tr></table></figure><p>这里主要关注的是<code>type</code>属性，默认情况下，<code>blob</code>对象是没有<code>type</code>属性的，那么这个<code>Blob</code>就是一个无类型的<code>Blob</code>，文件不会损毁，但是无法被正常识别。</p><h3 id="URL-createObjectURL"><a href="#URL-createObjectURL" class="headerlink" title="URL.createObjectURL"></a>URL.createObjectURL</h3><p>下面是<code>blob</code>对象的定义，来自<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL">MDN</a>：</p><blockquote><p>URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。</p></blockquote><p>这个方法是用来创建一个<code>url</code>的，它的作用是把一个<code>blob</code>对象转换成一个<code>url</code>，这个<code>url</code>可以用来下载文件，也可以用来预览文件，代码如下：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> url = <span class="variable constant_">URL</span>.<span class="title function_">createObjectURL</span>(blob)</span><br></pre></td></tr></table></figure><p>这里需要注意的是，这个<code>url</code>的生命周期和创建它的窗口中的<code>document</code>绑定，也就是说，当我们的<code>document</code>被销毁后，这个<code>url</code>就会失效，会自动释放它们，但是为了获得最佳性能和内存使用状况，我们应该在安全的时机主动释放掉它们，代码如下：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable constant_">URL</span>.<span class="title function_">revokeObjectURL</span>(url)</span><br></pre></td></tr></table></figure><h3 id="下载文件流"><a href="#下载文件流" class="headerlink" title="下载文件流"></a>下载文件流</h3><h4 id="指定返回数据格式"><a href="#指定返回数据格式" class="headerlink" title="指定返回数据格式"></a>指定返回数据格式</h4><blockquote><p>首先指定返回数据格式为blob：<code>responseType: &#39;blob&#39;</code></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导出报表</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">getMeetRoomExport</span>(<span class="params">data</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">        <span class="attr">url</span>: <span class="string">`xxxxxx`</span>,</span><br><span class="line">        <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">        <span class="attr">responseType</span>:<span class="string">&quot;blob&quot;</span>,  <span class="comment">//一定要加这个,不然下载的文件打不开</span></span><br><span class="line">        data</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h4 id="响应头headers获取文件信息"><a href="#响应头headers获取文件信息" class="headerlink" title="响应头headers获取文件信息"></a>响应头<code>headers</code>获取文件信息</h4><blockquote><p>在响应数据<code>response.headers[&quot;content-disposition&quot;]</code>中获取文件信息；包含<strong>文件名</strong>和<strong>文件类型</strong>；如下图所示：</p></blockquote><p><img src="https://img.fsllala.top/download21675767199385.png" alt="download"></p><p>可以在响应拦截器里面做数据处理：</p><ul><li>中文转码了，转回去；</li><li>将文件信息存到缓存，调用下载接口的时候获取文件信息；(给a标签的download设置文件名)</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//接收到响应数据并成功后的一些共有的处理</span></span><br><span class="line"><span class="keyword">if</span> (response.<span class="property">headers</span>[<span class="string">&quot;content-disposition&quot;</span>]) &#123;</span><br><span class="line">    <span class="keyword">const</span> temFileName =</span><br><span class="line">    response.<span class="property">headers</span>[<span class="string">&quot;content-disposition&quot;</span>].<span class="title function_">split</span>(<span class="string">&quot;filename=&quot;</span>)[<span class="number">1</span>];</span><br><span class="line">    <span class="keyword">const</span> intoName = <span class="title function_">revertUTF8</span>(temFileName.<span class="title function_">split</span>(<span class="string">&quot;-&quot;</span>)[<span class="number">0</span>]); <span class="comment">//decodeURI、decodeURIComponent都可以解决转码;</span></span><br><span class="line">    <span class="keyword">const</span> fileName = intoName + <span class="string">&quot;-&quot;</span> + temFileName.<span class="title function_">split</span>(<span class="string">&quot;-&quot;</span>)[<span class="number">1</span>];</span><br><span class="line">    sessionStorage.<span class="title function_">setItem</span>(<span class="string">&quot;fileName&quot;</span>, fileName);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h4 id="调用下载接口"><a href="#调用下载接口" class="headerlink" title="调用下载接口"></a>调用下载接口</h4><ul><li>我们可以打印一下res，是一个Blob对象；(如果接口没有设置responseType: ‘blob’，这里是后端返回的文件流)</li></ul><figure class="highlight plaintext"><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">getMeetRoomExport(this.exportParams).then((res) =&gt; &#123;</span><br><span class="line">console.log(res);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/download31675768232608.png" alt="download"></p><ul><li>接口请求</li></ul><blockquote><p>这里和后端商量是<code>docx</code>类型的文件，所以<code>type</code>值如下所示，其他类型的<code>type</code>值设置可参考<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">MDN</a>；</p></blockquote><figure class="highlight js"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">getMeetRoomExport</span>(<span class="variable language_">this</span>.<span class="property">exportParams</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// console.log(res);</span></span><br><span class="line">  <span class="keyword">if</span> (res) &#123;</span><br><span class="line">      <span class="comment">//这里和后端商量是docx类型的文件,所以type值如下:</span></span><br><span class="line">    <span class="keyword">let</span> blob = <span class="keyword">new</span> <span class="title class_">Blob</span>([res], &#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="string">&quot;application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">let</span> url = <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">createObjectURL</span>(blob);</span><br><span class="line">    <span class="keyword">const</span> link = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;a&quot;</span>); <span class="comment">// 创建a标签</span></span><br><span class="line">    link.<span class="property">href</span> = url;</span><br><span class="line">    link.<span class="property">download</span> = sessionStorage.<span class="title function_">getItem</span>(<span class="string">&quot;fileName&quot;</span>); <span class="comment">// 重命名文件</span></span><br><span class="line">    link.<span class="title function_">click</span>();</span><br><span class="line">    <span class="variable constant_">URL</span>.<span class="title function_">revokeObjectURL</span>(url); <span class="comment">// 释放内存</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>至此，文件就会下载成功；</p><h3 id="下载拓展"><a href="#下载拓展" class="headerlink" title="下载拓展"></a>下载拓展</h3><blockquote><p>回到我们刚才下载的问题，我们是通过<code>blob</code>对象来解决，但是我们的<code>type</code>属性是写死的，如果在文件类型是确定的情况下是没问题的，但是如果这个接口就是下载文件的接口，文件可能是各种类型的，我们应该怎么处理？</p></blockquote><ul><li>和接口提供者进行协商，确定下载的文件的格式，然后前端将<code>type</code>写死；</li><li>通过<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">枚举</a>和响应头<code>response.headers[&quot;content-disposition&quot;]</code>来实现；</li></ul><h4 id="枚举方式"><a href="#枚举方式" class="headerlink" title="枚举方式"></a>枚举方式</h4><ol><li>新建config 写入blobType的对象</li></ol><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> blobType = &#123;</span><br><span class="line">  <span class="attr">xls</span>: <span class="string">&#x27;application/vnd.ms-excel&#x27;</span>,</span><br><span class="line">  <span class="attr">xlsx</span>: <span class="string">&#x27;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&#x27;</span>,</span><br><span class="line">  <span class="attr">csv</span>: <span class="string">&#x27;text/csv&#x27;</span>,</span><br><span class="line">  <span class="attr">doc</span>: <span class="string">&#x27;application/msword&#x27;</span>,</span><br><span class="line">  <span class="attr">docx</span>: <span class="string">&#x27;application/vnd.openxmlformats-officedocument.wordprocessingml.document&#x27;</span>,</span><br><span class="line">  <span class="attr">pdf</span>: <span class="string">&#x27;application/pdf&#x27;</span>,</span><br><span class="line">  <span class="attr">ppt</span>: <span class="string">&#x27;application/vnd.ms-powerpoint&#x27;</span>,</span><br><span class="line">  <span class="attr">pptx</span>: <span class="string">&#x27;application/vnd.openxmlformats-officedocument.presentationml.presentation&#x27;</span>,</span><br><span class="line">  <span class="attr">png</span>: <span class="string">&#x27;image/png&#x27;</span>,</span><br><span class="line">  <span class="attr">gif</span>: <span class="string">&#x27;image/gif&#x27;</span>,</span><br><span class="line">  <span class="attr">jpeg</span>: <span class="string">&#x27;image/jpeg&#x27;</span>,</span><br><span class="line">  <span class="attr">jpg</span>: <span class="string">&#x27;image/jpeg&#x27;</span>,</span><br><span class="line">  <span class="attr">mp3</span>: <span class="string">&#x27;audio/mpeg&#x27;</span>,</span><br><span class="line">  <span class="attr">aac</span>: <span class="string">&#x27;audio/aac&#x27;</span>,</span><br><span class="line">  <span class="attr">html</span>: <span class="string">&#x27;text/html&#x27;</span>,</span><br><span class="line">  <span class="attr">css</span>: <span class="string">&#x27;text/css&#x27;</span>,</span><br><span class="line">  <span class="attr">js</span>: <span class="string">&#x27;text/javascript&#x27;</span>,</span><br><span class="line">  <span class="attr">json</span>: <span class="string">&#x27;application/json&#x27;</span>,</span><br><span class="line">  <span class="attr">abw</span>: <span class="string">&#x27;application/x-abiword&#x27;</span>,</span><br><span class="line">  <span class="attr">arc</span>: <span class="string">&#x27;application/x-freearc&#x27;</span>,</span><br><span class="line">  <span class="attr">avi</span>: <span class="string">&#x27;video/x-msvideo&#x27;</span>,</span><br><span class="line">  <span class="attr">azw</span>: <span class="string">&#x27;application/vnd.amazon.ebook&#x27;</span>,</span><br><span class="line">  <span class="attr">bin</span>: <span class="string">&#x27;application/octet-stream&#x27;</span>,</span><br><span class="line">  <span class="attr">bmp</span>: <span class="string">&#x27;image/bmp&#x27;</span>,</span><br><span class="line">  <span class="attr">bz</span>: <span class="string">&#x27;application/x-bzip&#x27;</span>,</span><br><span class="line">  <span class="attr">bz2</span>: <span class="string">&#x27;application/x-bzip2&#x27;</span>,</span><br><span class="line">  <span class="attr">csh</span>: <span class="string">&#x27;application/x-csh&#x27;</span>,</span><br><span class="line">  <span class="attr">eot</span>: <span class="string">&#x27;application/vnd.ms-fontobject&#x27;</span>,</span><br><span class="line">  <span class="attr">epub</span>: <span class="string">&#x27;application/epub+zip&#x27;</span>,</span><br><span class="line">  <span class="attr">htm</span>: <span class="string">&#x27;text/html&#x27;</span>,</span><br><span class="line">  <span class="attr">ico</span>: <span class="string">&#x27;image/vnd.microsoft.icon&#x27;</span>,</span><br><span class="line">  <span class="attr">ics</span>: <span class="string">&#x27;text/calendar&#x27;</span>,</span><br><span class="line">  <span class="attr">jar</span>: <span class="string">&#x27;application/java-archive&#x27;</span>,</span><br><span class="line">  <span class="attr">jsonld</span>: <span class="string">&#x27;application/ld+json&#x27;</span>,</span><br><span class="line">  <span class="attr">mid</span>: <span class="string">&#x27;audio/midi audio/x-midi&#x27;</span>,</span><br><span class="line">  <span class="attr">midi</span>: <span class="string">&#x27;audio/midi audio/x-midi&#x27;</span>,</span><br><span class="line">  <span class="attr">mjs</span>: <span class="string">&#x27;text/javascript&#x27;</span>,</span><br><span class="line">  <span class="attr">mpeg</span>: <span class="string">&#x27;video/mpeg&#x27;</span>,</span><br><span class="line">  <span class="attr">mpkg</span>: <span class="string">&#x27;application/vnd.apple.installer+xml&#x27;</span>,</span><br><span class="line">  <span class="attr">odp</span>: <span class="string">&#x27;application/vnd.oasis.opendocument.presentation&#x27;</span>,</span><br><span class="line">  <span class="attr">ods</span>: <span class="string">&#x27;application/vnd.oasis.opendocument.spreadsheet&#x27;</span>,</span><br><span class="line">  <span class="attr">odt</span>: <span class="string">&#x27;application/vnd.oasis.opendocument.text&#x27;</span>,</span><br><span class="line">  <span class="attr">oga</span>: <span class="string">&#x27;audio/ogg&#x27;</span>,</span><br><span class="line">  <span class="attr">ogv</span>: <span class="string">&#x27;video/ogg&#x27;</span>,</span><br><span class="line">  <span class="attr">ogx</span>: <span class="string">&#x27;application/ogg&#x27;</span>,</span><br><span class="line">  <span class="attr">otf</span>: <span class="string">&#x27;font/otf&#x27;</span>,</span><br><span class="line">  <span class="attr">rar</span>: <span class="string">&#x27;application/x-rar-compressed&#x27;</span>,</span><br><span class="line">  <span class="attr">rtf</span>: <span class="string">&#x27;application/rtf&#x27;</span>,</span><br><span class="line">  <span class="attr">sh</span>: <span class="string">&#x27;application/x-sh&#x27;</span>,</span><br><span class="line">  <span class="attr">svg</span>: <span class="string">&#x27;image/svg+xml&#x27;</span>,</span><br><span class="line">  <span class="attr">swf</span>: <span class="string">&#x27;application/x-shockwave-flash&#x27;</span>,</span><br><span class="line">  <span class="attr">tar</span>: <span class="string">&#x27;application/x-tar&#x27;</span>,</span><br><span class="line">  <span class="attr">tif</span>: <span class="string">&#x27;image/tiff&#x27;</span>,</span><br><span class="line">  <span class="attr">tiff</span>: <span class="string">&#x27;image/tiff&#x27;</span>,</span><br><span class="line">  <span class="attr">ttf</span>: <span class="string">&#x27;font/ttf&#x27;</span>,</span><br><span class="line">  <span class="attr">txt</span>: <span class="string">&#x27;text/plain&#x27;</span>,</span><br><span class="line">  <span class="attr">vsd</span>: <span class="string">&#x27;application/vnd.visio&#x27;</span>,</span><br><span class="line">  <span class="attr">wav</span>: <span class="string">&#x27;audio/wav&#x27;</span>,</span><br><span class="line">  <span class="attr">weba</span>: <span class="string">&#x27;audio/webm&#x27;</span>,</span><br><span class="line">  <span class="attr">webm</span>: <span class="string">&#x27;video/webm&#x27;</span>,</span><br><span class="line">  <span class="attr">webp</span>: <span class="string">&#x27;image/webp&#x27;</span>,</span><br><span class="line">  <span class="attr">woff</span>: <span class="string">&#x27;font/woff&#x27;</span>,</span><br><span class="line">  <span class="attr">woff2</span>: <span class="string">&#x27;font/woff2&#x27;</span>,</span><br><span class="line">  <span class="attr">xhtml</span>: <span class="string">&#x27;application/xhtml+xml&#x27;</span>,</span><br><span class="line">  <span class="attr">xml</span>: <span class="string">&#x27;text/xml&#x27;</span>,</span><br><span class="line">  <span class="attr">xul</span>: <span class="string">&#x27;application/vnd.mozilla.xul+xml&#x27;</span>,</span><br><span class="line">  <span class="attr">zip</span>: <span class="string">&#x27;application/zip&#x27;</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>引入，通过缓存中的文件名后缀确定type值；大致思路如下：</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.引入枚举</span></span><br><span class="line"><span class="keyword">import</span> &#123; blobType &#125; <span class="keyword">from</span> <span class="string">&#x27;@/config/global&#x27;</span>; </span><br><span class="line"><span class="comment">// 2.获取文件拓展名</span></span><br><span class="line"><span class="keyword">let</span> extName = sessionStorage.<span class="title function_">getItem</span>(<span class="string">&quot;fileName&quot;</span>).<span class="title function_">split</span>(<span class="string">&quot;.&quot;</span>)[<span class="number">1</span>];</span><br><span class="line"><span class="comment">// console.log(extName); // docx</span></span><br><span class="line"><span class="comment">// 3.设置type值</span></span><br><span class="line"><span class="keyword">let</span> blob = <span class="keyword">new</span> <span class="title class_">Blob</span>([res], &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">`<span class="subst">$&#123;blobType[file_type]&#125;</span>;charset=UTF-8`</span>,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h3 id="Blob拓展"><a href="#Blob拓展" class="headerlink" title="Blob拓展"></a>Blob拓展</h3><blockquote><p>不仅是后端传来的文件流可以下载，字符串、对象、数组等任意类型都可以下载；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 下载txt格式的文件;</span></span><br><span class="line"><span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;btn&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&quot;使用Blob对象下载文件&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> blob = <span class="keyword">new</span> <span class="title class_">Blob</span>([str], &#123; <span class="attr">type</span>: <span class="string">&quot;text/plain&quot;</span> &#125;)</span><br><span class="line">btn.<span class="property">onclick</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(blob); // 和文件流一样,是个Blob对象</span></span><br><span class="line">    <span class="keyword">let</span> url = <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">createObjectURL</span>(blob);</span><br><span class="line">    <span class="keyword">const</span> a = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">    a.<span class="property">href</span> = url;</span><br><span class="line">    a.<span class="property">download</span> = <span class="string">&quot;fsl&quot;</span>;</span><br><span class="line">    a.<span class="title function_">click</span>();</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">revokeObjectURL</span>(url);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>现象：点击按钮，下载名为 <code>fsl.txt</code>文件,内容为 “使用Blob对象下载文件”；</p><h3 id="URL-createObjectURL拓展"><a href="#URL-createObjectURL拓展" class="headerlink" title="URL.createObjectURL拓展"></a>URL.createObjectURL拓展</h3><blockquote><p>使用URL.createObjectURL实现图片本地预览</p></blockquote><p>这个方法是用来创建一个<code>url</code>的，它的作用是把一个<code>blob</code>对象转换成一个<code>url</code>，这个<code>url</code>可以用来下载文件，也可以用来预览文件；</p><figure class="highlight html"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;submit&quot;</span>&gt;</span>上传图片</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;file&quot;</span> <span class="attr">id</span>=<span class="string">&quot;submit&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;pic&quot;</span> <span class="attr">id</span>=<span class="string">&quot;img&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> submit = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;submit&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> img = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;img&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    img.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;none&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">    submit.<span class="property">onchange</span> = <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        img.<span class="property">src</span> = <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">createObjectURL</span>(e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>]);</span></span><br><span class="line"><span class="language-javascript">        img.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            img.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">            <span class="variable constant_">URL</span>.<span class="title function_">revokeObjectURL</span>(e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>]);</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://blog.csdn.net/u012881483/article/details/120042474">关于标签a的download属性兼容性总结</a></p><p><a href="https://www.cnblogs.com/ychizzz/p/13858427.html">利用Blob实现前端导出Excel,Doc等文件</a></p><p><a href="https://blog.csdn.net/Edwiin_9/article/details/125843637">js根据文件后缀动态获取blob的type,并将流文件转blob</a></p><p><a href="https://blog.csdn.net/ShinyRuo_/article/details/122165573">下载出来文件内容为空的解决方法</a></p><p><a href="https://blog.csdn.net/weixin_42912237/article/details/122063752?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-122063752-blog-122165573.pc_relevant_aa2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-5-122063752-blog-122165573.pc_relevant_aa2&utm_relevant_index=10">前端解析后端文件流并下载</a></p><p><a href="https://blog.csdn.net/Rainy_X/article/details/112610150?spm=1001.2014.3001.5502">js实现前端下载文件</a></p>]]></content>
       
       
       <categories>
@@ -365,7 +365,7 @@
       <link href="/articles/f6275dee.html"/>
       <url>/articles/f6275dee.html</url>
       
-        <content type="html"><![CDATA[<h1 id="JSON-stringify-深拷贝的弊端"><a href="#JSON-stringify-深拷贝的弊端" class="headerlink" title="JSON.stringify 深拷贝的弊端"></a>JSON.stringify 深拷贝的弊端</h1><h2 id="时间对象"><a href="#时间对象" class="headerlink" title="时间对象"></a>时间对象</h2><blockquote><p>如果 obj 里面有时间对象，则 JSON.stringify 后再 JSON.parse 的结果，时间将转为<strong>字符串</strong>的形式，而不是<strong>对象</strong>的形式</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:[<span class="keyword">new</span> <span class="title class_">Date</span>(),<span class="keyword">new</span> <span class="title class_">Date</span>()]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675493820079.png" alt="stringify"></p><h2 id="RegExp-、Error"><a href="#RegExp-、Error" class="headerlink" title="RegExp 、Error"></a>RegExp 、Error</h2><blockquote><p>如果 obj 里有 RegExp (正则表达式的缩写)、Error 对象，则序列化的结果将只得到空对象；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="regexp">/aabb[a-z]\d/</span>,</span><br><span class="line">    <span class="attr">c</span>:<span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;typeError&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675493731487.png" alt="stringfy"></p><h2 id="function、undefined、Symbol"><a href="#function、undefined、Symbol" class="headerlink" title="function、undefined、Symbol"></a>function、undefined、Symbol</h2><blockquote><p>如果 obj 里有函数（function），undefined，Symbol 则序列化的结果会把 function 、 undefined 、Symbol 丢失；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">fn</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;<span class="keyword">let</span> a = <span class="number">123</span>;<span class="variable language_">console</span>.<span class="title function_">log</span>(a)&#125;,</span><br><span class="line">    <span class="attr">c</span>:<span class="literal">undefined</span>,</span><br><span class="line">    <span class="attr">d</span>:<span class="title class_">Symbol</span>(<span class="string">&#x27;foo&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675493621131.png" alt="stringfy"></p><blockquote><p>如果 Array里有函数（function），undefined，Symbol 则序列化的结果会把 function 、 undefined 、Symbol 转为null；(占位用)</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>: [<span class="keyword">function</span> (<span class="params"></span>) &#123; <span class="keyword">let</span> a = <span class="number">123</span>; <span class="variable language_">console</span>.<span class="title function_">log</span>(a) &#125;, <span class="literal">undefined</span>, <span class="title class_">Symbol</span>(<span class="string">&#x27;foo&#x27;</span>)]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj, newObj);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675493491371.png" alt="stringfy"></p><h2 id="NaN、Infinity-、-Infinity"><a href="#NaN、Infinity-、-Infinity" class="headerlink" title="NaN、Infinity 、-Infinity"></a>NaN、Infinity 、-Infinity</h2><blockquote><p>如果obj里有 NaN、Infinity 和 -Infinity，则序列化的结果会变成 null</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="title class_">NaN</span>,</span><br><span class="line">    <span class="attr">c</span>:<span class="title class_">Infinity</span>,</span><br><span class="line">    <span class="attr">d</span>:-<span class="title class_">Infinity</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675493981952.png" alt="stringfy"></p><h2 id="枚举"><a href="#枚举" class="headerlink" title="枚举"></a>枚举</h2><ul><li>构造函数</li></ul><blockquote><p>JSON.stringify() 只能序列化对象的可枚举的自有属性，例如如果 obj 中的对象是有构造函数生成的， 则使用 JSON.parse(JSON.stringify(obj)) 深拷贝后，会丢弃对象的 constructor；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Student</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">a</span> = <span class="number">1</span>;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">b</span> = <span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="keyword">new</span> <span class="title class_">Student</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675494072860.png" alt="stringfy"></p><ul><li>通过<code>Object.defineProperty</code>手动设置某属性不可枚举：</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="number">234</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(obj,<span class="string">&#x27;c&#x27;</span>,&#123;</span><br><span class="line">    <span class="attr">value</span>:<span class="number">22</span>,</span><br><span class="line">    <span class="attr">enumerable</span>:<span class="literal">false</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1675494167827.png" alt="stringfy"></p><h1 id="弊端总结"><a href="#弊端总结" class="headerlink" title="弊端总结"></a>弊端总结</h1><blockquote><p>用法简单，然而使用这种方法会有一些隐藏的坑：因为在序列化 JavaScript 对象时，所有函数和原型成员会被有意忽略；</p><p>通俗点说，JSON.parse(JSON.stringfy(X))，其中 X 只能是 Number, String, Boolean, Array,扁平对象，即那些能够被 JSON 直接表示的数据结构。</p></blockquote><ul><li>Date 对象变为字符串</li><li>RegExp、Error 对象变为空对象 {}</li><li>函数、undefined、Symbol 属性<ul><li>作为对象value：丢失</li><li>作为Array的value：为null</li></ul></li><li>NaN、Infinity、-Infinity 变为 null</li><li>enumerable 为 false 的属性丢失</li></ul><h1 id="JSON-stringify-常用方式"><a href="#JSON-stringify-常用方式" class="headerlink" title="JSON.stringify() 常用方式"></a>JSON.stringify() 常用方式</h1><h2 id="判断是否相等"><a href="#判断是否相等" class="headerlink" title="判断是否相等"></a>判断是否相等</h2><blockquote><p>判断数组是否包含某对象，或者判断对象是否相等</p></blockquote><ul><li>是否相等</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="number">456</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj2 = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="number">456</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj) === <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj2));<span class="comment">//true</span></span><br></pre></td></tr></table></figure><ul><li>是否包含</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [</span><br><span class="line">    &#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">a</span>:<span class="number">2</span>,<span class="attr">b</span>:<span class="number">3</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">a</span>:<span class="number">3</span>,<span class="attr">b</span>:<span class="number">4</span>&#125;</span><br><span class="line">]</span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">a</span>:<span class="number">2</span>,<span class="attr">b</span>:<span class="number">3</span>&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr).<span class="title function_">includes</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj)));<span class="comment">//true</span></span><br></pre></td></tr></table></figure><h2 id="缓存"><a href="#缓存" class="headerlink" title="缓存"></a>缓存</h2><ul><li>让 localStorage &#x2F; sessionStorage 可以存储对象。</li></ul><blockquote><p>localStorage&#x2F;sessionStorage 默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用 Json.stringify() 将对象转为字符串,取出时利用 JSON.parse() 将字符串转为对象即可。</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">sessionStorage.<span class="title function_">setItem</span>(<span class="string">&#x27;user&#x27;</span>,<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(&#123;<span class="attr">name</span>:<span class="string">&#x27;aaa&#x27;</span>,<span class="attr">age</span>:<span class="number">16</span>&#125;));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(sessionStorage.<span class="title function_">getItem</span>(<span class="string">&#x27;user&#x27;</span>)));<span class="comment">//&#123;name: &quot;aaa&quot;, age: 16&#125;</span></span><br></pre></td></tr></table></figure><p>JSON.stringify()与toString()这两者虽然都可以将目标值转为字符串，但本质上还是有区别的</p><figure class="highlight js"><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"><span class="keyword">let</span> arr = [<span class="number">12</span>,<span class="number">12</span>,<span class="number">12</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr),arr.<span class="title function_">toString</span>());</span><br><span class="line"><span class="comment">//[12,12,12] 12,12,12</span></span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://blog.csdn.net/MFWSCQ/article/details/112977766">利用 JSON.stringify 深拷贝的弊端</a></p>]]></content>
+        <content type="html"><![CDATA[<h1 id="JSON-stringify-深拷贝的弊端"><a href="#JSON-stringify-深拷贝的弊端" class="headerlink" title="JSON.stringify 深拷贝的弊端"></a>JSON.stringify 深拷贝的弊端</h1><h2 id="时间对象"><a href="#时间对象" class="headerlink" title="时间对象"></a>时间对象</h2><blockquote><p>如果 obj 里面有时间对象，则 JSON.stringify 后再 JSON.parse 的结果，时间将转为<strong>字符串</strong>的形式，而不是<strong>对象</strong>的形式</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:[<span class="keyword">new</span> <span class="title class_">Date</span>(),<span class="keyword">new</span> <span class="title class_">Date</span>()]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1675493820079.png" alt="stringify"></p><h2 id="RegExp-、Error"><a href="#RegExp-、Error" class="headerlink" title="RegExp 、Error"></a>RegExp 、Error</h2><blockquote><p>如果 obj 里有 RegExp (正则表达式的缩写)、Error 对象，则序列化的结果将只得到空对象；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="regexp">/aabb[a-z]\d/</span>,</span><br><span class="line">    <span class="attr">c</span>:<span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;typeError&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1675493731487.png" alt="stringfy"></p><h2 id="function、undefined、Symbol"><a href="#function、undefined、Symbol" class="headerlink" title="function、undefined、Symbol"></a>function、undefined、Symbol</h2><blockquote><p>如果 obj 里有函数（function），undefined，Symbol 则序列化的结果会把 function 、 undefined 、Symbol 丢失；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">fn</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;<span class="keyword">let</span> a = <span class="number">123</span>;<span class="variable language_">console</span>.<span class="title function_">log</span>(a)&#125;,</span><br><span class="line">    <span class="attr">c</span>:<span class="literal">undefined</span>,</span><br><span class="line">    <span class="attr">d</span>:<span class="title class_">Symbol</span>(<span class="string">&#x27;foo&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1675493621131.png" alt="stringfy"></p><blockquote><p>如果 Array里有函数（function），undefined，Symbol 则序列化的结果会把 function 、 undefined 、Symbol 转为null；(占位用)</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>: [<span class="keyword">function</span> (<span class="params"></span>) &#123; <span class="keyword">let</span> a = <span class="number">123</span>; <span class="variable language_">console</span>.<span class="title function_">log</span>(a) &#125;, <span class="literal">undefined</span>, <span class="title class_">Symbol</span>(<span class="string">&#x27;foo&#x27;</span>)]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj, newObj);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1675493491371.png" alt="stringfy"></p><h2 id="NaN、Infinity-、-Infinity"><a href="#NaN、Infinity-、-Infinity" class="headerlink" title="NaN、Infinity 、-Infinity"></a>NaN、Infinity 、-Infinity</h2><blockquote><p>如果obj里有 NaN、Infinity 和 -Infinity，则序列化的结果会变成 null</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="title class_">NaN</span>,</span><br><span class="line">    <span class="attr">c</span>:<span class="title class_">Infinity</span>,</span><br><span class="line">    <span class="attr">d</span>:-<span class="title class_">Infinity</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1675493981952.png" alt="stringfy"></p><h2 id="枚举"><a href="#枚举" class="headerlink" title="枚举"></a>枚举</h2><ul><li>构造函数</li></ul><blockquote><p>JSON.stringify() 只能序列化对象的可枚举的自有属性，例如如果 obj 中的对象是有构造函数生成的， 则使用 JSON.parse(JSON.stringify(obj)) 深拷贝后，会丢弃对象的 constructor；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Student</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">a</span> = <span class="number">1</span>;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">b</span> = <span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="keyword">new</span> <span class="title class_">Student</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1675494072860.png" alt="stringfy"></p><ul><li>通过<code>Object.defineProperty</code>手动设置某属性不可枚举：</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="number">234</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(obj,<span class="string">&#x27;c&#x27;</span>,&#123;</span><br><span class="line">    <span class="attr">value</span>:<span class="number">22</span>,</span><br><span class="line">    <span class="attr">enumerable</span>:<span class="literal">false</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> newObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj,newObj);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1675494167827.png" alt="stringfy"></p><h1 id="弊端总结"><a href="#弊端总结" class="headerlink" title="弊端总结"></a>弊端总结</h1><blockquote><p>用法简单，然而使用这种方法会有一些隐藏的坑：因为在序列化 JavaScript 对象时，所有函数和原型成员会被有意忽略；</p><p>通俗点说，JSON.parse(JSON.stringfy(X))，其中 X 只能是 Number, String, Boolean, Array,扁平对象，即那些能够被 JSON 直接表示的数据结构。</p></blockquote><ul><li>Date 对象变为字符串</li><li>RegExp、Error 对象变为空对象 {}</li><li>函数、undefined、Symbol 属性<ul><li>作为对象value：丢失</li><li>作为Array的value：为null</li></ul></li><li>NaN、Infinity、-Infinity 变为 null</li><li>enumerable 为 false 的属性丢失</li></ul><h1 id="JSON-stringify-常用方式"><a href="#JSON-stringify-常用方式" class="headerlink" title="JSON.stringify() 常用方式"></a>JSON.stringify() 常用方式</h1><h2 id="判断是否相等"><a href="#判断是否相等" class="headerlink" title="判断是否相等"></a>判断是否相等</h2><blockquote><p>判断数组是否包含某对象，或者判断对象是否相等</p></blockquote><ul><li>是否相等</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="number">456</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj2 = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">b</span>:<span class="number">456</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj) === <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj2));<span class="comment">//true</span></span><br></pre></td></tr></table></figure><ul><li>是否包含</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [</span><br><span class="line">    &#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">a</span>:<span class="number">2</span>,<span class="attr">b</span>:<span class="number">3</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">a</span>:<span class="number">3</span>,<span class="attr">b</span>:<span class="number">4</span>&#125;</span><br><span class="line">]</span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">a</span>:<span class="number">2</span>,<span class="attr">b</span>:<span class="number">3</span>&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr).<span class="title function_">includes</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj)));<span class="comment">//true</span></span><br></pre></td></tr></table></figure><h2 id="缓存"><a href="#缓存" class="headerlink" title="缓存"></a>缓存</h2><ul><li>让 localStorage &#x2F; sessionStorage 可以存储对象。</li></ul><blockquote><p>localStorage&#x2F;sessionStorage 默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用 Json.stringify() 将对象转为字符串,取出时利用 JSON.parse() 将字符串转为对象即可。</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">sessionStorage.<span class="title function_">setItem</span>(<span class="string">&#x27;user&#x27;</span>,<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(&#123;<span class="attr">name</span>:<span class="string">&#x27;aaa&#x27;</span>,<span class="attr">age</span>:<span class="number">16</span>&#125;));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(sessionStorage.<span class="title function_">getItem</span>(<span class="string">&#x27;user&#x27;</span>)));<span class="comment">//&#123;name: &quot;aaa&quot;, age: 16&#125;</span></span><br></pre></td></tr></table></figure><p>JSON.stringify()与toString()这两者虽然都可以将目标值转为字符串，但本质上还是有区别的</p><figure class="highlight js"><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"><span class="keyword">let</span> arr = [<span class="number">12</span>,<span class="number">12</span>,<span class="number">12</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr),arr.<span class="title function_">toString</span>());</span><br><span class="line"><span class="comment">//[12,12,12] 12,12,12</span></span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://blog.csdn.net/MFWSCQ/article/details/112977766">利用 JSON.stringify 深拷贝的弊端</a></p>]]></content>
       
       
       <categories>
@@ -392,7 +392,7 @@
       <link href="/articles/e98504f5.html"/>
       <url>/articles/e98504f5.html</url>
       
-        <content type="html"><![CDATA[<h2 id="对象的引用赋值"><a href="#对象的引用赋值" class="headerlink" title="对象的引用赋值"></a>对象的引用赋值</h2><blockquote><p>js中一旦遇到引用数据类型，就会开辟一块堆内存，将引用数据类型的值进行储存，并给这块堆内存分配一个16进制地址。</p></blockquote><figure class="highlight js"><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"><span class="keyword">const</span> info = &#123;<span class="attr">name</span>:<span class="string">&quot;forward&quot;</span>,<span class="attr">age</span>:<span class="number">24</span>&#125;;</span><br><span class="line"><span class="keyword">const</span> obj = info;</span><br><span class="line">obj.<span class="property">age</span>=<span class="number">23</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">age</span>);<span class="comment">//23</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656848745916kbb.png" alt="引用赋值"></p><h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h2><ul><li>浅拷贝：将第一层的数据数据完全拷贝过来，如果有引用类型，引用类型指向的是一个16进制地址，也会拷贝过来(即：拷贝的引用类型和原数据指向同一个内存地址)</li><li>(对象)如果属性是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址</li><li>(数组)如果数组元素(arr[index])是基本类型，就会拷贝一份，互不影响，而如果是对象或者数组，就会只拷贝对象和数组的引用，这样我们无论在新旧数组进行了修改，两者都会发生变化</li><li>即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址</li><li>常见的浅拷贝：<ul><li>Object.assign()</li><li>concat()</li><li>slice() 返回一个新的数组对象；原始数组不会被改变。</li><li>…拓展运算符</li><li>Lodash库 <code>_.clone(value)</code></li></ul></li></ul><p>例如：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//Object.assign()对象的浅拷贝</span></span><br><span class="line"><span class="keyword">const</span> info = &#123; <span class="attr">name</span>: <span class="string">&quot;forward&quot;</span>, <span class="attr">age</span>: <span class="number">24</span> &#125;;</span><br><span class="line"><span class="comment">//把info对象中的所有属性拷贝一份,放到第一个对象&#123;&#125;里面;若第一个对象&#123;&#125;有相同的属性,则会被后面的替换掉;</span></span><br><span class="line"><span class="keyword">const</span> obj = <span class="title class_">Object</span>.<span class="title function_">assign</span>(&#123;&#125;,info);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);<span class="comment">//&#123;name: &#x27;forward&#x27;, age: 24&#125;</span></span><br><span class="line">obj.<span class="property">age</span>=<span class="number">23</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">age</span>);<span class="comment">//24</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846204916qkb.png" alt="对象浅拷贝"></p><blockquote><p>将上述代码进行简单修改，加一个对象参数；这个对象参数会开辟一块堆内存(16进制地址)；浅拷贝会将第一层的数据数据完全拷贝过来，引用类型指向的是一个16进制地址，也会拷贝过来(即：拷贝的引用类型指向同一个内存地址)；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//Object.assign()对象的浅拷贝</span></span><br><span class="line"><span class="keyword">const</span> info = &#123; <span class="attr">name</span>: <span class="string">&quot;forward&quot;</span>, <span class="attr">age</span>: <span class="number">24</span>,<span class="attr">friend</span>:&#123;<span class="attr">name</span>:<span class="string">&quot;zhangsan&quot;</span>,<span class="attr">age</span>:<span class="number">23</span>&#125; &#125;;</span><br><span class="line"><span class="keyword">const</span> obj = <span class="title class_">Object</span>.<span class="title function_">assign</span>(&#123;&#125;,info);</span><br><span class="line">obj.<span class="property">friend</span>.<span class="property">name</span>=<span class="string">&quot;lisi&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">friend</span>.<span class="property">name</span>);<span class="comment">//lisi</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1709462451619.jpg" alt="浅拷贝"></p><h3 id="Lodash-JS库"><a href="#Lodash-JS库" class="headerlink" title="Lodash  JS库"></a>Lodash  JS库</h3><blockquote><p>Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库；用<code>_.clone(xxx)</code>实现浅拷贝；详见：<a href="https://www.lodashjs.com/">Lodash 中文文档</a></p></blockquote><figure class="highlight js"><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"><span class="keyword">const</span> objects = [&#123; <span class="string">&#x27;a&#x27;</span>: <span class="number">1</span> &#125;, &#123; <span class="string">&#x27;b&#x27;</span>: <span class="number">2</span> &#125;];</span><br><span class="line"><span class="keyword">const</span> shallow = _.<span class="title function_">clone</span>(objects);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(shallow[<span class="number">0</span>] === objects[<span class="number">0</span>]);</span><br><span class="line"><span class="comment">// =&gt; true</span></span><br></pre></td></tr></table></figure><h3 id="数组的浅拷贝"><a href="#数组的浅拷贝" class="headerlink" title="数组的浅拷贝"></a>数组的浅拷贝</h3><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="string">&#x27;old&#x27;</span>, <span class="number">1</span>, <span class="literal">true</span>, <span class="literal">null</span>, <span class="literal">undefined</span>];</span><br><span class="line"><span class="keyword">const</span> arr2 = arr.<span class="title function_">concat</span>();<span class="comment">//concat()</span></span><br><span class="line"><span class="keyword">const</span> arr3 = arr.<span class="title function_">slice</span>();<span class="comment">//slice()</span></span><br><span class="line"><span class="keyword">const</span> arr4 = [...arr];<span class="comment">//...拓展运算符</span></span><br><span class="line">arr2[<span class="number">0</span>]=<span class="string">&quot;new&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr2);</span><br></pre></td></tr></table></figure><h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><ul><li>深拷贝是指完全生成了一个新的对象，里面所有的东西都是新的，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个。</li></ul><h3 id="JSON-parse-JSON-string-xxx"><a href="#JSON-parse-JSON-string-xxx" class="headerlink" title="JSON.parse(JSON.string(xxx))"></a>JSON.parse(JSON.string(xxx))</h3><figure class="highlight js"><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"><span class="keyword">const</span> info = &#123; <span class="attr">name</span>: <span class="string">&quot;forward&quot;</span>, <span class="attr">age</span>: <span class="number">24</span>,<span class="attr">friend</span>:&#123;<span class="attr">name</span>:<span class="string">&quot;zhangsan&quot;</span>,<span class="attr">age</span>:<span class="number">23</span>&#125; &#125;;</span><br><span class="line"><span class="keyword">const</span> obj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(info))</span><br><span class="line">obj.<span class="property">friend</span>.<span class="property">name</span>=<span class="string">&quot;lisi&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">friend</span>.<span class="property">name</span>);<span class="comment">//zhangsan</span></span><br></pre></td></tr></table></figure><blockquote><p>此方法缺点：JSON.stringify(..) 在对象中遇到 undefined 、 function 和 symbol 时会自动将其忽略， 在 数组中则会返回 null （以保证单元位置不变）。详见：<a href="https://fsllala.eu.org/articles/f6275dee.html">JSON.stringify 深拷贝的弊端</a></p></blockquote><figure class="highlight js"><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"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(<span class="literal">undefined</span>));<span class="comment">//undefined</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>( <span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;));<span class="comment">//undefined</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>( [<span class="number">1</span>,<span class="literal">undefined</span>,<span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;,<span class="number">4</span>]));<span class="comment">//[1,null,null,4]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(&#123; <span class="literal">undefined</span>,<span class="attr">a</span>:<span class="number">2</span>, <span class="attr">b</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;&#125;));<span class="comment">//&#123;&quot;a&quot;:2&#125;</span></span><br></pre></td></tr></table></figure><h3 id="Lodash-JS库-1"><a href="#Lodash-JS库-1" class="headerlink" title="Lodash  JS库"></a>Lodash  JS库</h3><blockquote><p>Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库；用<code>_.cloneDeep(xxx)</code>实现深拷贝；详见：<a href="https://www.lodashjs.com/">Lodash 中文文档</a></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> objects = [&#123; <span class="string">&#x27;a&#x27;</span>: <span class="number">1</span> &#125;, &#123; <span class="string">&#x27;b&#x27;</span>: <span class="number">2</span> &#125;];</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> deep = _.<span class="title function_">cloneDeep</span>(objects);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(deep[<span class="number">0</span>] === objects[<span class="number">0</span>]);</span><br><span class="line"><span class="comment">// =&gt; false</span></span><br></pre></td></tr></table></figure><h3 id="浅拷贝-递归"><a href="#浅拷贝-递归" class="headerlink" title="浅拷贝+递归"></a>浅拷贝+递归</h3><blockquote><p>见下文手写浅(深)拷贝</p></blockquote><h3 id="structuredClone"><a href="#structuredClone" class="headerlink" title="structuredClone()"></a>structuredClone()</h3><blockquote><p>在 JS 中深拷贝一个对象，我们一般会使用 lodash 的 deepClone 等方法。现在一个新的原生函数可以完美胜任这个任务：<br>structuredClone()；这个函数几乎完美适配所有类型，甚至包括： Error，Date，Blob 等等。更棒的是而且现在主流的浏览器都兼容这个函数；</p></blockquote><ul><li>在哪里可以使用structuredClone()？<ul><li><a href="https://chromestatus.com/feature/5630001077551104">Chrome 98</a></li><li><a href="https://developer.apple.com/safari/technology-preview/release-notes/">Safari 137 (Technology Preview Release)</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/structuredClone#browser_compatibility">Firefox 94</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/structuredClone#browser_compatibility">Node.js 17.0</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/structuredClone#browser_compatibility">Deno 1.14</a></li></ul></li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">bar</span>: [<span class="string">&quot;ES6&quot;</span>, <span class="string">&quot;NEW API&quot;</span>, <span class="string">&quot;DeepClone&quot;</span>]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj2 = <span class="title function_">structuredClone</span>(obj);</span><br><span class="line">obj.<span class="property">bar</span>.<span class="title function_">push</span>(<span class="string">&quot;add&quot;</span>);</span><br><span class="line">obj2.<span class="property">bar</span>.<span class="title function_">pop</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">bar</span>);  <span class="comment">//  [&#x27;ES6&#x27;, &#x27;NEW API&#x27;, &#x27;DeepClone&#x27;, &#x27;add&#x27;]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj2.<span class="property">bar</span>); <span class="comment">//  [&#x27;ES6&#x27;, &#x27;NEW API&#x27;]</span></span><br></pre></td></tr></table></figure><h2 id="手写浅-深-拷贝"><a href="#手写浅-深-拷贝" class="headerlink" title="手写浅(深)拷贝"></a>手写浅(深)拷贝</h2><blockquote><p> object.hasOwnProperty(propertyName)</p></blockquote><ul><li>用来检测属性是否为对象的私有属性，如果是，返回true，否则返回false； 参数propertyName指要检测的属性名；</li><li>所以说不会检测原型链上的公有属性；</li><li>说简单点，它能帮你指向你当前循环的对象，而过滤掉原型链上其它对象，因为在工作中我们很难保证其他人是否会修改原型链，这样做会更为保险；</li><li><strong><code>hasOwnProperty()</code></strong> 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性(处理对象属性而不遍历原型链)；</li><li><strong><code>Object.hasOwn()</code><strong>如果指定的对象<em>自身</em>有指定的属性，则静态方法 <strong><code>Object.hasOwn()</code></strong> 返回 <code>true</code>。如果属性是继承的或者不存在，该方法返回 <code>false</code>；</strong>备注：</strong> <code>Object.hasOwn()</code> 旨在取代 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>Object.hasOwnProperty()</code></a>。</li></ul><blockquote><p>object.hasOwnProperty(propertyName)</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> object1 = &#123;&#125;;</span><br><span class="line">object1.<span class="property">property1</span> = <span class="number">42</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(object1.<span class="title function_">hasOwnProperty</span>(<span class="string">&#x27;property1&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: true</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(object1.<span class="title function_">hasOwnProperty</span>(<span class="string">&#x27;toString&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: false</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(object1.<span class="title function_">hasOwnProperty</span>(<span class="string">&#x27;hasOwnProperty&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: false</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><blockquote><p>Object.hasOwn()</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> object1 = &#123;</span><br><span class="line">  <span class="attr">prop</span>: <span class="string">&#x27;exists&#x27;</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">hasOwn</span>(object1, <span class="string">&#x27;prop&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: true</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">hasOwn</span>(object1, <span class="string">&#x27;toString&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: false</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">hasOwn</span>(object1, <span class="string">&#x27;undeclaredPropertyValue&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: false</span></span><br></pre></td></tr></table></figure><h3 id="浅拷贝-1"><a href="#浅拷贝-1" class="headerlink" title="浅拷贝"></a>浅拷贝</h3><blockquote><p>遍历对象，然后把属性和属性值都放在一个新的对象不就好了~</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> shallowCopy = <span class="keyword">function</span>(<span class="params">obj</span>) &#123;</span><br><span class="line">    <span class="comment">// 只拷贝对象</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> obj !== <span class="string">&#x27;object&#x27;</span>) <span class="keyword">return</span>;</span><br><span class="line">    <span class="comment">// 根据obj的类型判断是新建一个数组还是对象</span></span><br><span class="line">    <span class="keyword">var</span> newObj = obj <span class="keyword">instanceof</span> <span class="title class_">Array</span> ? [] : &#123;&#125;;</span><br><span class="line">    <span class="comment">// 遍历obj，并且判断是obj的属性才拷贝</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">        <span class="keyword">if</span> (obj.<span class="title function_">hasOwnProperty</span>(key)) &#123;</span><br><span class="line">            newObj[key] = obj[key];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newObj;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="深拷贝-1"><a href="#深拷贝-1" class="headerlink" title="深拷贝"></a>深拷贝</h3><blockquote><p>那如何实现一个深拷贝呢？说起来也好简单，我们在拷贝的时候判断一下属性值的类型，如果是对象，我们递归调用深拷贝函数不就好了~</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> deepCopy = <span class="keyword">function</span>(<span class="params">obj</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> obj !== <span class="string">&#x27;object&#x27;</span>) <span class="keyword">return</span>;</span><br><span class="line">    <span class="keyword">var</span> newObj = obj <span class="keyword">instanceof</span> <span class="title class_">Array</span> ? [] : &#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">        <span class="keyword">if</span> (obj.<span class="title function_">hasOwnProperty</span>(key)) &#123;</span><br><span class="line">            newObj[key] = <span class="keyword">typeof</span> obj[key] === <span class="string">&#x27;object&#x27;</span> ? <span class="title function_">deepCopy</span>(obj[key]) : obj[key];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newObj;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><table><thead><tr><th align="center"></th><th align="center"><strong>和原数据是否指向同一对象</strong></th><th align="center"><strong>第一层数据为基本数据类型</strong></th><th align="center"><strong>原数据中包含子对象</strong></th></tr></thead><tbody><tr><td align="center">赋值</td><td align="center">是</td><td align="center">改变会使原数据一同改变</td><td align="center">改变会使原数据一同改变</td></tr><tr><td align="center">浅拷贝</td><td align="center">否</td><td align="center">改变<strong>不</strong>会使原数据一同改变</td><td align="center">改变会使原数据一同改变</td></tr><tr><td align="center">深拷贝</td><td align="center">否</td><td align="center">改变<strong>不</strong>会使原数据一同改变</td><td align="center">改变<strong>不</strong>会使原数据一同改变</td></tr></tbody></table><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://blog.csdn.net/songjungang/article/details/125373543">JS中对象深拷贝：structuredClone()</a></p><p><a href="https://www.jianshu.com/p/f9ec860ecd81">Object.assign()的使用</a></p><p><a href="https://github.com/mqyqingfeng/Blog/issues/32">JavaScript专题之深浅拷贝</a></p><p><a href="https://segmentfault.com/a/1190000017776457">详细解析赋值、浅拷贝和深拷贝的区别</a></p><p><a href="https://blog.csdn.net/a791226606/article/details/110679991">hasOwnProperty() 方法详解</a></p>]]></content>
+        <content type="html"><![CDATA[<h2 id="对象的引用赋值"><a href="#对象的引用赋值" class="headerlink" title="对象的引用赋值"></a>对象的引用赋值</h2><blockquote><p>js中一旦遇到引用数据类型，就会开辟一块堆内存，将引用数据类型的值进行储存，并给这块堆内存分配一个16进制地址。</p></blockquote><figure class="highlight js"><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"><span class="keyword">const</span> info = &#123;<span class="attr">name</span>:<span class="string">&quot;forward&quot;</span>,<span class="attr">age</span>:<span class="number">24</span>&#125;;</span><br><span class="line"><span class="keyword">const</span> obj = info;</span><br><span class="line">obj.<span class="property">age</span>=<span class="number">23</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">age</span>);<span class="comment">//23</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656848745916kbb.png" alt="引用赋值"></p><h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h2><ul><li>浅拷贝：将第一层的数据数据完全拷贝过来，如果有引用类型，引用类型指向的是一个16进制地址，也会拷贝过来(即：拷贝的引用类型和原数据指向同一个内存地址)</li><li>(对象)如果属性是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址</li><li>(数组)如果数组元素(arr[index])是基本类型，就会拷贝一份，互不影响，而如果是对象或者数组，就会只拷贝对象和数组的引用，这样我们无论在新旧数组进行了修改，两者都会发生变化</li><li>即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址</li><li>常见的浅拷贝：<ul><li>Object.assign()</li><li>concat()</li><li>slice() 返回一个新的数组对象；原始数组不会被改变。</li><li>…拓展运算符</li><li>Lodash库 <code>_.clone(value)</code></li></ul></li></ul><p>例如：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//Object.assign()对象的浅拷贝</span></span><br><span class="line"><span class="keyword">const</span> info = &#123; <span class="attr">name</span>: <span class="string">&quot;forward&quot;</span>, <span class="attr">age</span>: <span class="number">24</span> &#125;;</span><br><span class="line"><span class="comment">//把info对象中的所有属性拷贝一份,放到第一个对象&#123;&#125;里面;若第一个对象&#123;&#125;有相同的属性,则会被后面的替换掉;</span></span><br><span class="line"><span class="keyword">const</span> obj = <span class="title class_">Object</span>.<span class="title function_">assign</span>(&#123;&#125;,info);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);<span class="comment">//&#123;name: &#x27;forward&#x27;, age: 24&#125;</span></span><br><span class="line">obj.<span class="property">age</span>=<span class="number">23</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">age</span>);<span class="comment">//24</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656846204916qkb.png" alt="对象浅拷贝"></p><blockquote><p>将上述代码进行简单修改，加一个对象参数；这个对象参数会开辟一块堆内存(16进制地址)；浅拷贝会将第一层的数据数据完全拷贝过来，引用类型指向的是一个16进制地址，也会拷贝过来(即：拷贝的引用类型指向同一个内存地址)；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//Object.assign()对象的浅拷贝</span></span><br><span class="line"><span class="keyword">const</span> info = &#123; <span class="attr">name</span>: <span class="string">&quot;forward&quot;</span>, <span class="attr">age</span>: <span class="number">24</span>,<span class="attr">friend</span>:&#123;<span class="attr">name</span>:<span class="string">&quot;zhangsan&quot;</span>,<span class="attr">age</span>:<span class="number">23</span>&#125; &#125;;</span><br><span class="line"><span class="keyword">const</span> obj = <span class="title class_">Object</span>.<span class="title function_">assign</span>(&#123;&#125;,info);</span><br><span class="line">obj.<span class="property">friend</span>.<span class="property">name</span>=<span class="string">&quot;lisi&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">friend</span>.<span class="property">name</span>);<span class="comment">//lisi</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1709462451619.jpg" alt="浅拷贝"></p><h3 id="Lodash-JS库"><a href="#Lodash-JS库" class="headerlink" title="Lodash  JS库"></a>Lodash  JS库</h3><blockquote><p>Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库；用<code>_.clone(xxx)</code>实现浅拷贝；详见：<a href="https://www.lodashjs.com/">Lodash 中文文档</a></p></blockquote><figure class="highlight js"><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"><span class="keyword">const</span> objects = [&#123; <span class="string">&#x27;a&#x27;</span>: <span class="number">1</span> &#125;, &#123; <span class="string">&#x27;b&#x27;</span>: <span class="number">2</span> &#125;];</span><br><span class="line"><span class="keyword">const</span> shallow = _.<span class="title function_">clone</span>(objects);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(shallow[<span class="number">0</span>] === objects[<span class="number">0</span>]);</span><br><span class="line"><span class="comment">// =&gt; true</span></span><br></pre></td></tr></table></figure><h3 id="数组的浅拷贝"><a href="#数组的浅拷贝" class="headerlink" title="数组的浅拷贝"></a>数组的浅拷贝</h3><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="string">&#x27;old&#x27;</span>, <span class="number">1</span>, <span class="literal">true</span>, <span class="literal">null</span>, <span class="literal">undefined</span>];</span><br><span class="line"><span class="keyword">const</span> arr2 = arr.<span class="title function_">concat</span>();<span class="comment">//concat()</span></span><br><span class="line"><span class="keyword">const</span> arr3 = arr.<span class="title function_">slice</span>();<span class="comment">//slice()</span></span><br><span class="line"><span class="keyword">const</span> arr4 = [...arr];<span class="comment">//...拓展运算符</span></span><br><span class="line">arr2[<span class="number">0</span>]=<span class="string">&quot;new&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr2);</span><br></pre></td></tr></table></figure><h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><ul><li>深拷贝是指完全生成了一个新的对象，里面所有的东西都是新的，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个。</li></ul><h3 id="JSON-parse-JSON-string-xxx"><a href="#JSON-parse-JSON-string-xxx" class="headerlink" title="JSON.parse(JSON.string(xxx))"></a>JSON.parse(JSON.string(xxx))</h3><figure class="highlight js"><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"><span class="keyword">const</span> info = &#123; <span class="attr">name</span>: <span class="string">&quot;forward&quot;</span>, <span class="attr">age</span>: <span class="number">24</span>,<span class="attr">friend</span>:&#123;<span class="attr">name</span>:<span class="string">&quot;zhangsan&quot;</span>,<span class="attr">age</span>:<span class="number">23</span>&#125; &#125;;</span><br><span class="line"><span class="keyword">const</span> obj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(info))</span><br><span class="line">obj.<span class="property">friend</span>.<span class="property">name</span>=<span class="string">&quot;lisi&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">friend</span>.<span class="property">name</span>);<span class="comment">//zhangsan</span></span><br></pre></td></tr></table></figure><blockquote><p>此方法缺点：JSON.stringify(..) 在对象中遇到 undefined 、 function 和 symbol 时会自动将其忽略， 在 数组中则会返回 null （以保证单元位置不变）。详见：<a href="https://fsllala.eu.org/articles/f6275dee.html">JSON.stringify 深拷贝的弊端</a></p></blockquote><figure class="highlight js"><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"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(<span class="literal">undefined</span>));<span class="comment">//undefined</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>( <span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;));<span class="comment">//undefined</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>( [<span class="number">1</span>,<span class="literal">undefined</span>,<span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;,<span class="number">4</span>]));<span class="comment">//[1,null,null,4]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(&#123; <span class="literal">undefined</span>,<span class="attr">a</span>:<span class="number">2</span>, <span class="attr">b</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;&#125;));<span class="comment">//&#123;&quot;a&quot;:2&#125;</span></span><br></pre></td></tr></table></figure><h3 id="Lodash-JS库-1"><a href="#Lodash-JS库-1" class="headerlink" title="Lodash  JS库"></a>Lodash  JS库</h3><blockquote><p>Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库；用<code>_.cloneDeep(xxx)</code>实现深拷贝；详见：<a href="https://www.lodashjs.com/">Lodash 中文文档</a></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> objects = [&#123; <span class="string">&#x27;a&#x27;</span>: <span class="number">1</span> &#125;, &#123; <span class="string">&#x27;b&#x27;</span>: <span class="number">2</span> &#125;];</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> deep = _.<span class="title function_">cloneDeep</span>(objects);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(deep[<span class="number">0</span>] === objects[<span class="number">0</span>]);</span><br><span class="line"><span class="comment">// =&gt; false</span></span><br></pre></td></tr></table></figure><h3 id="浅拷贝-递归"><a href="#浅拷贝-递归" class="headerlink" title="浅拷贝+递归"></a>浅拷贝+递归</h3><blockquote><p>见下文手写浅(深)拷贝</p></blockquote><h3 id="structuredClone"><a href="#structuredClone" class="headerlink" title="structuredClone()"></a>structuredClone()</h3><blockquote><p>在 JS 中深拷贝一个对象，我们一般会使用 lodash 的 deepClone 等方法。现在一个新的原生函数可以完美胜任这个任务：<br>structuredClone()；这个函数几乎完美适配所有类型，甚至包括： Error，Date，Blob 等等。更棒的是而且现在主流的浏览器都兼容这个函数；</p></blockquote><ul><li>在哪里可以使用structuredClone()？<ul><li><a href="https://chromestatus.com/feature/5630001077551104">Chrome 98</a></li><li><a href="https://developer.apple.com/safari/technology-preview/release-notes/">Safari 137 (Technology Preview Release)</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/structuredClone#browser_compatibility">Firefox 94</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/structuredClone#browser_compatibility">Node.js 17.0</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/structuredClone#browser_compatibility">Deno 1.14</a></li></ul></li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">bar</span>: [<span class="string">&quot;ES6&quot;</span>, <span class="string">&quot;NEW API&quot;</span>, <span class="string">&quot;DeepClone&quot;</span>]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj2 = <span class="title function_">structuredClone</span>(obj);</span><br><span class="line">obj.<span class="property">bar</span>.<span class="title function_">push</span>(<span class="string">&quot;add&quot;</span>);</span><br><span class="line">obj2.<span class="property">bar</span>.<span class="title function_">pop</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">bar</span>);  <span class="comment">//  [&#x27;ES6&#x27;, &#x27;NEW API&#x27;, &#x27;DeepClone&#x27;, &#x27;add&#x27;]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj2.<span class="property">bar</span>); <span class="comment">//  [&#x27;ES6&#x27;, &#x27;NEW API&#x27;]</span></span><br></pre></td></tr></table></figure><h2 id="手写浅-深-拷贝"><a href="#手写浅-深-拷贝" class="headerlink" title="手写浅(深)拷贝"></a>手写浅(深)拷贝</h2><blockquote><p> object.hasOwnProperty(propertyName)</p></blockquote><ul><li>用来检测属性是否为对象的私有属性，如果是，返回true，否则返回false； 参数propertyName指要检测的属性名；</li><li>所以说不会检测原型链上的公有属性；</li><li>说简单点，它能帮你指向你当前循环的对象，而过滤掉原型链上其它对象，因为在工作中我们很难保证其他人是否会修改原型链，这样做会更为保险；</li><li><strong><code>hasOwnProperty()</code></strong> 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性(处理对象属性而不遍历原型链)；</li><li><strong><code>Object.hasOwn()</code><strong>如果指定的对象<em>自身</em>有指定的属性，则静态方法 <strong><code>Object.hasOwn()</code></strong> 返回 <code>true</code>。如果属性是继承的或者不存在，该方法返回 <code>false</code>；</strong>备注：</strong> <code>Object.hasOwn()</code> 旨在取代 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>Object.hasOwnProperty()</code></a>。</li></ul><blockquote><p>object.hasOwnProperty(propertyName)</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> object1 = &#123;&#125;;</span><br><span class="line">object1.<span class="property">property1</span> = <span class="number">42</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(object1.<span class="title function_">hasOwnProperty</span>(<span class="string">&#x27;property1&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: true</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(object1.<span class="title function_">hasOwnProperty</span>(<span class="string">&#x27;toString&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: false</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(object1.<span class="title function_">hasOwnProperty</span>(<span class="string">&#x27;hasOwnProperty&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: false</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><blockquote><p>Object.hasOwn()</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> object1 = &#123;</span><br><span class="line">  <span class="attr">prop</span>: <span class="string">&#x27;exists&#x27;</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">hasOwn</span>(object1, <span class="string">&#x27;prop&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: true</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">hasOwn</span>(object1, <span class="string">&#x27;toString&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: false</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">hasOwn</span>(object1, <span class="string">&#x27;undeclaredPropertyValue&#x27;</span>));</span><br><span class="line"><span class="comment">// Expected output: false</span></span><br></pre></td></tr></table></figure><h3 id="浅拷贝-1"><a href="#浅拷贝-1" class="headerlink" title="浅拷贝"></a>浅拷贝</h3><blockquote><p>遍历对象，然后把属性和属性值都放在一个新的对象不就好了~</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> shallowCopy = <span class="keyword">function</span>(<span class="params">obj</span>) &#123;</span><br><span class="line">    <span class="comment">// 只拷贝对象</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> obj !== <span class="string">&#x27;object&#x27;</span>) <span class="keyword">return</span>;</span><br><span class="line">    <span class="comment">// 根据obj的类型判断是新建一个数组还是对象</span></span><br><span class="line">    <span class="keyword">var</span> newObj = obj <span class="keyword">instanceof</span> <span class="title class_">Array</span> ? [] : &#123;&#125;;</span><br><span class="line">    <span class="comment">// 遍历obj，并且判断是obj的属性才拷贝</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">        <span class="keyword">if</span> (obj.<span class="title function_">hasOwnProperty</span>(key)) &#123;</span><br><span class="line">            newObj[key] = obj[key];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newObj;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="深拷贝-1"><a href="#深拷贝-1" class="headerlink" title="深拷贝"></a>深拷贝</h3><blockquote><p>那如何实现一个深拷贝呢？说起来也好简单，我们在拷贝的时候判断一下属性值的类型，如果是对象，我们递归调用深拷贝函数不就好了~</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> deepCopy = <span class="keyword">function</span>(<span class="params">obj</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> obj !== <span class="string">&#x27;object&#x27;</span>) <span class="keyword">return</span>;</span><br><span class="line">    <span class="keyword">var</span> newObj = obj <span class="keyword">instanceof</span> <span class="title class_">Array</span> ? [] : &#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">        <span class="keyword">if</span> (obj.<span class="title function_">hasOwnProperty</span>(key)) &#123;</span><br><span class="line">            newObj[key] = <span class="keyword">typeof</span> obj[key] === <span class="string">&#x27;object&#x27;</span> ? <span class="title function_">deepCopy</span>(obj[key]) : obj[key];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newObj;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><table><thead><tr><th align="center"></th><th align="center"><strong>和原数据是否指向同一对象</strong></th><th align="center"><strong>第一层数据为基本数据类型</strong></th><th align="center"><strong>原数据中包含子对象</strong></th></tr></thead><tbody><tr><td align="center">赋值</td><td align="center">是</td><td align="center">改变会使原数据一同改变</td><td align="center">改变会使原数据一同改变</td></tr><tr><td align="center">浅拷贝</td><td align="center">否</td><td align="center">改变<strong>不</strong>会使原数据一同改变</td><td align="center">改变会使原数据一同改变</td></tr><tr><td align="center">深拷贝</td><td align="center">否</td><td align="center">改变<strong>不</strong>会使原数据一同改变</td><td align="center">改变<strong>不</strong>会使原数据一同改变</td></tr></tbody></table><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://blog.csdn.net/songjungang/article/details/125373543">JS中对象深拷贝：structuredClone()</a></p><p><a href="https://www.jianshu.com/p/f9ec860ecd81">Object.assign()的使用</a></p><p><a href="https://github.com/mqyqingfeng/Blog/issues/32">JavaScript专题之深浅拷贝</a></p><p><a href="https://segmentfault.com/a/1190000017776457">详细解析赋值、浅拷贝和深拷贝的区别</a></p><p><a href="https://blog.csdn.net/a791226606/article/details/110679991">hasOwnProperty() 方法详解</a></p>]]></content>
       
       
       <categories>
@@ -419,7 +419,7 @@
       <link href="/articles/6e473482.html"/>
       <url>/articles/6e473482.html</url>
       
-        <content type="html"><![CDATA[<h2 id="栈内存和堆内存"><a href="#栈内存和堆内存" class="headerlink" title="栈内存和堆内存"></a>栈内存和堆内存</h2><blockquote><p>我们知道程序是需要加载到内存中来执行的，我们可以将内存划分为两个区域：<strong>栈内存和堆内存</strong>。</p></blockquote><ul><li><strong>原始类型</strong>占据的空间是在<strong>栈内存</strong>中分配的；</li><li><strong>对象类型</strong>占据的空间是在<strong>堆内存</strong>中分配的；</li></ul><h3 id="值类型和引用类型"><a href="#值类型和引用类型" class="headerlink" title="值类型和引用类型"></a>值类型和引用类型</h3><ul><li>原始类型的保存方式：在变量中保存的是值本身；所有原始类型也被称之为值类型；</li><li>对象类型的保存方式：在变量中保存的是对象的引用；所以对象类型也被称之为引用类型；</li></ul><blockquote><ol><li><p>JS代码是单线程的，代码从上到下执行，栈内存是先入后出的，所以上面的代码在栈的底部；</p></li><li><p>基本数据类型直接在栈内存中分配内存，变量保存的是值本身；</p></li><li><p>引用数据类型在堆内存中分配内存，并生成16进制地址，栈中的变量保存的是16进制地址，即对象的引用地址；</p></li><li><p>赋值操作是在栈中完成的：<code>const nickName=name;</code>将栈内存中name的值赋值给nickName，即<code>nickName=&quot;fsllala&quot;</code>;</p><p><code>const info = obj;</code>将栈内存中obj的内存地址赋值给info，即<code>info=0x100;</code></p></li></ol></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> name = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> age = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">foo</span>: <span class="string">&quot;foo&quot;</span>,</span><br><span class="line">    <span class="attr">bar</span>: <span class="number">123</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> nickName = name;</span><br><span class="line"><span class="keyword">const</span> info = obj;</span><br><span class="line">info.<span class="property">foo</span> = <span class="string">&quot;hahaha&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">foo</span>);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672153266310stack.png" alt="stack"></p><h3 id="变量的比较"><a href="#变量的比较" class="headerlink" title="变量的比较"></a>变量的比较</h3><blockquote><p>基本数据类型比较的是值；引用数据类型比较的是地址；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">const</span> b = <span class="number">123</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a === b); <span class="comment">//true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> m = &#123;&#125;;</span><br><span class="line"><span class="keyword">const</span> n = &#123;&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m === n); <span class="comment">//false</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672153284493heap.png" alt="heap"></p><h3 id="引用的赋值"><a href="#引用的赋值" class="headerlink" title="引用的赋值"></a>引用的赋值</h3><blockquote><p>info是个对象，在栈内存中保存的是一个指针，在堆内存中保存的是代码；<code>info.friend</code>又是一个对象，保存一个指针，在堆内存中开辟新的内存来保存<code>info.friend</code>中的代码；所以<code>info.friend</code>为一个指针，赋值给了friend；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> info = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;why&quot;</span>,</span><br><span class="line">    <span class="attr">friend</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>:<span class="string">&quot;kobe&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> friend =info.<span class="property">friend</span>;</span><br><span class="line">friend.<span class="property">name</span>=<span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">friend</span>); <span class="comment">//fsllala</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672154427505fuzhi.png" alt="fuzhi"></p><h3 id="值传递和引用传递的区别"><a href="#值传递和引用传递的区别" class="headerlink" title="值传递和引用传递的区别"></a>值传递和引用传递的区别</h3><h4 id="值传递"><a href="#值传递" class="headerlink" title="值传递"></a>值传递</h4><blockquote><p>在栈内存中进行赋值，<code>const num = 100</code>基本数据类型，直接赋值；<code>foo(num)</code>其实是<code>foo(100)</code>；即<code>a=100</code>;然后又<code>a=200</code></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    a = <span class="number">200</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> num = <span class="number">100</span>;</span><br><span class="line"><span class="title function_">foo</span>(num);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">//100</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672155794600zhi.png" alt="fuzhi"></p><h4 id="引用传递"><a href="#引用传递" class="headerlink" title="引用传递"></a>引用传递</h4><blockquote><p>在栈内存中进行赋值，引用数据类型赋值的是指针，在堆内存中保存代码；<code>foo(obj)</code>其实是<code>foo(指针)</code>，即<code>a=指针</code>，紧接着，<code>a=&#123;name:&quot;why&quot;&#125;</code>，在堆内存中保存其代码，分配一个新的指针给a，即<code>a=指针2</code></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    a = &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;why&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;obj&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">foo</span>(obj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);  <span class="comment">//&#123;name:&quot;obj&quot;&#125;</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672156492006OBJ.png" alt="obj"></p><blockquote><p>同上面相比，上面是新开辟了一个堆内存，这个是通过指针对堆地址的代码进行了修改；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">a.<span class="property">name</span> = <span class="string">&quot;why&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line"><span class="attr">name</span>: <span class="string">&quot;obj&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">foo</span>(obj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span>);  <span class="comment">//why</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1672157849228obj.png" alt="obj"></p>]]></content>
+        <content type="html"><![CDATA[<h2 id="栈内存和堆内存"><a href="#栈内存和堆内存" class="headerlink" title="栈内存和堆内存"></a>栈内存和堆内存</h2><blockquote><p>我们知道程序是需要加载到内存中来执行的，我们可以将内存划分为两个区域：<strong>栈内存和堆内存</strong>。</p></blockquote><ul><li><strong>原始类型</strong>占据的空间是在<strong>栈内存</strong>中分配的；</li><li><strong>对象类型</strong>占据的空间是在<strong>堆内存</strong>中分配的；</li></ul><h3 id="值类型和引用类型"><a href="#值类型和引用类型" class="headerlink" title="值类型和引用类型"></a>值类型和引用类型</h3><ul><li>原始类型的保存方式：在变量中保存的是值本身；所有原始类型也被称之为值类型；</li><li>对象类型的保存方式：在变量中保存的是对象的引用；所以对象类型也被称之为引用类型；</li></ul><blockquote><ol><li><p>JS代码是单线程的，代码从上到下执行，栈内存是先入后出的，所以上面的代码在栈的底部；</p></li><li><p>基本数据类型直接在栈内存中分配内存，变量保存的是值本身；</p></li><li><p>引用数据类型在堆内存中分配内存，并生成16进制地址，栈中的变量保存的是16进制地址，即对象的引用地址；</p></li><li><p>赋值操作是在栈中完成的：<code>const nickName=name;</code>将栈内存中name的值赋值给nickName，即<code>nickName=&quot;fsllala&quot;</code>;</p><p><code>const info = obj;</code>将栈内存中obj的内存地址赋值给info，即<code>info=0x100;</code></p></li></ol></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> name = <span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> age = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">foo</span>: <span class="string">&quot;foo&quot;</span>,</span><br><span class="line">    <span class="attr">bar</span>: <span class="number">123</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> nickName = name;</span><br><span class="line"><span class="keyword">const</span> info = obj;</span><br><span class="line">info.<span class="property">foo</span> = <span class="string">&quot;hahaha&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">foo</span>);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1672153266310stack.png" alt="stack"></p><h3 id="变量的比较"><a href="#变量的比较" class="headerlink" title="变量的比较"></a>变量的比较</h3><blockquote><p>基本数据类型比较的是值；引用数据类型比较的是地址；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">const</span> b = <span class="number">123</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a === b); <span class="comment">//true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> m = &#123;&#125;;</span><br><span class="line"><span class="keyword">const</span> n = &#123;&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m === n); <span class="comment">//false</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1672153284493heap.png" alt="heap"></p><h3 id="引用的赋值"><a href="#引用的赋值" class="headerlink" title="引用的赋值"></a>引用的赋值</h3><blockquote><p>info是个对象，在栈内存中保存的是一个指针，在堆内存中保存的是代码；<code>info.friend</code>又是一个对象，保存一个指针，在堆内存中开辟新的内存来保存<code>info.friend</code>中的代码；所以<code>info.friend</code>为一个指针，赋值给了friend；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> info = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;why&quot;</span>,</span><br><span class="line">    <span class="attr">friend</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>:<span class="string">&quot;kobe&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> friend =info.<span class="property">friend</span>;</span><br><span class="line">friend.<span class="property">name</span>=<span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">friend</span>); <span class="comment">//fsllala</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1672154427505fuzhi.png" alt="fuzhi"></p><h3 id="值传递和引用传递的区别"><a href="#值传递和引用传递的区别" class="headerlink" title="值传递和引用传递的区别"></a>值传递和引用传递的区别</h3><h4 id="值传递"><a href="#值传递" class="headerlink" title="值传递"></a>值传递</h4><blockquote><p>在栈内存中进行赋值，<code>const num = 100</code>基本数据类型，直接赋值；<code>foo(num)</code>其实是<code>foo(100)</code>；即<code>a=100</code>;然后又<code>a=200</code></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    a = <span class="number">200</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> num = <span class="number">100</span>;</span><br><span class="line"><span class="title function_">foo</span>(num);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">//100</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1672155794600zhi.png" alt="fuzhi"></p><h4 id="引用传递"><a href="#引用传递" class="headerlink" title="引用传递"></a>引用传递</h4><blockquote><p>在栈内存中进行赋值，引用数据类型赋值的是指针，在堆内存中保存代码；<code>foo(obj)</code>其实是<code>foo(指针)</code>，即<code>a=指针</code>，紧接着，<code>a=&#123;name:&quot;why&quot;&#125;</code>，在堆内存中保存其代码，分配一个新的指针给a，即<code>a=指针2</code></p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    a = &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;why&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;obj&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">foo</span>(obj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);  <span class="comment">//&#123;name:&quot;obj&quot;&#125;</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1672156492006OBJ.png" alt="obj"></p><blockquote><p>同上面相比，上面是新开辟了一个堆内存，这个是通过指针对堆地址的代码进行了修改；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">a.<span class="property">name</span> = <span class="string">&quot;why&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line"><span class="attr">name</span>: <span class="string">&quot;obj&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">foo</span>(obj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span>);  <span class="comment">//why</span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1672157849228obj.png" alt="obj"></p>]]></content>
       
       
       <categories>
@@ -446,7 +446,7 @@
       <link href="/articles/58add7e9.html"/>
       <url>/articles/58add7e9.html</url>
       
-        <content type="html"><![CDATA[<h2 id="什么是跨域"><a href="#什么是跨域" class="headerlink" title="什么是跨域"></a>什么是跨域</h2><ul><li><p>由于浏览器的同源策略限制，当一个请求<code>url</code>的<strong>协议、域名、端口</strong>三者之间任意一个与当前页面<code>url</code>不同时，需要跨域才能成功访问；</p></li><li><p>同源策略是<strong>浏览器的行为</strong>，是浏览器最核心也最基本的<strong>安全功能</strong>；</p></li></ul><h2 id="前端解决跨域方法"><a href="#前端解决跨域方法" class="headerlink" title="前端解决跨域方法"></a>前端解决跨域方法</h2><blockquote><p>其实跨域问题都是找后端解决的；</p></blockquote><h3 id="误区：前端通过jsonp解决跨域"><a href="#误区：前端通过jsonp解决跨域" class="headerlink" title="误区：前端通过jsonp解决跨域"></a>误区：前端通过jsonp解决跨域</h3><h4 id="原生写法"><a href="#原生写法" class="headerlink" title="原生写法"></a>原生写法</h4><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>创建一个script标签</span><br><span class="line"><span class="keyword">var</span> os=<span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;script&quot;</span>)</span><br><span class="line"><span class="number">2.</span>给script一个src,src就是地址</span><br><span class="line">os.<span class="property">src</span>=<span class="string">&quot;http://suggestion.baidu.com/su?cb=qwer&amp;wd=123&quot;</span></span><br><span class="line"><span class="number">3.</span>将script插入到页面</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(os)</span><br><span class="line"><span class="number">4.</span>回调函数处理数据</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">qwer</span>(<span class="params">d</span>)&#123;</span><br><span class="line">    <span class="comment">//d就是后端返回的数据</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure><h4 id="ajax请求"><a href="#ajax请求" class="headerlink" title="ajax请求"></a>ajax请求</h4><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">$.<span class="title function_">ajax</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>:<span class="string">&quot;http://suggestion.baidu.com/su?&quot;</span>,</span><br><span class="line">    <span class="attr">type</span>:<span class="string">&quot;get&quot;</span>,</span><br><span class="line">    <span class="attr">dataType</span>:<span class="string">&quot;jsonp&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>:&#123;</span><br><span class="line">        <span class="attr">wd</span>:<span class="string">&quot;123&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">jsonp</span>:<span class="string">&quot;cb&quot;</span>,<span class="comment">// 回调参数key</span></span><br><span class="line">    <span class="attr">jsonpCallback</span>:<span class="string">&quot;test&quot;</span>,<span class="comment">// 回调函数value</span></span><br><span class="line">    <span class="attr">success</span>:<span class="keyword">function</span>(<span class="params">res</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">error</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;error&quot;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846360917ky.png" alt="jsonp"></p><h4 id="jsonp实现原理"><a href="#jsonp实现原理" class="headerlink" title="jsonp实现原理"></a>jsonp实现原理</h4><ul><li><p>动态生成script标签，通过src属性来加载；</p></li><li><p>默认使用<code>Jsonp</code>进行跨域时，请求的url地址后面会自动带上一个<code>callback=xxx</code>传给后端，后端需要对返回给前端的<code>json</code>数据做处理，此处的<code>callback</code>可通过<code>jsonp</code>来自定义，<code>xxx</code>可通过<code>jsonpCallback</code>来自定义；</p></li><li><p><code>jsonp</code>: 回调函数的参数，是与后端约定好的参数，必须与后端保持一致。不另外定义<code>jsonp</code>的话，一般默认为<code>jsonp:&#39;callback&#39;</code></p></li><li><p><code>jsonpCallback</code>: 回调函数名，用来包裹住<code>json</code>数据，不另外定义的话，这个参数的值往往是随机生成的。</p></li><li><p>按照上面百度搜索的<code>jsonp</code>来举例子：<code>http://suggestion.baidu.com/su?cb=test</code>；其中<code>?cb=test</code>中的<code>cb</code>为<code>key</code>，<code>test</code>为<code>value</code>；</p></li><li><p>前端会传递一个callback参数（key）给后端，接着后端返回数据时会将这个callback参数的值（value）作为函数名来包裹住json数据，最终返给前端的就是一段js代码了；</p></li><li><p>客户端需要将函数名称传递到服务器 可以如下实现：</p></li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//前端</span></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">data</span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;客户端的函数调用了&quot;</span>)</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;http://localhost:3000/test?callback=fn&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//后端</span></span><br><span class="line"><span class="comment">//路由配置</span></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/test&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> fnName = req.<span class="property">query</span>.<span class="property">callback</span>;</span><br><span class="line">  <span class="keyword">var</span> result = fnName + <span class="string">&#x27;(&#123;name:&quot;zhangsan&quot;&#125;)&#x27;</span>;</span><br><span class="line">  res.<span class="title function_">send</span>(result);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h4 id="结论"><a href="#结论" class="headerlink" title="结论"></a>结论</h4><ol><li>jsonp方法的实现是需要前端和后端配合的；</li><li>jsonp只支持get请求，不支持post请求；</li><li>jsonp有安全性问题：jsonp劫持，jsonp劫持属于CSRF漏洞；</li></ol><h3 id="前端通过代理解决跨域"><a href="#前端通过代理解决跨域" class="headerlink" title="前端通过代理解决跨域"></a>前端通过代理解决跨域</h3><blockquote><p>反向代理有很多，可以用nodejs，可以用nginx，这里只介绍nginx</p></blockquote><h4 id="nginx-反向代理"><a href="#nginx-反向代理" class="headerlink" title="nginx 反向代理"></a>nginx 反向代理</h4><blockquote><p>由于同源策略是浏览器导致的；所以可以找一个<strong>中间代理服务器</strong>；使用这个中间代理服务器去请求后端的地址；因为服务和服务之间是不存在同源策略的，所以中间代理服务器可以请求到后端接口数据；最后前端请求中间代理服务器；</p></blockquote><figure class="highlight js"><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"><span class="comment">//常用命令</span></span><br><span class="line">start nginx 开启</span><br><span class="line">nginx -s stop 停止</span><br><span class="line">nginx -s reload 重新加载</span><br></pre></td></tr></table></figure><ol><li>官网下载稳定版</li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">http://nginx.org/en/download.html</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846395917nginx.png" alt="nginx"></p><ol start="2"><li>在根目录下，输入<code>cmd</code>打开终端</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846458918nginx2.png" alt="nginx"></p><ol start="3"><li>在终端中使用指令<code>start nginx</code>开启nginx</li><li>在浏览器输入<code>localhost</code>，出现如下界面即代表开启成功</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846752917nginx3.png" alt="nginx"></p><ol start="5"><li>配置nginx ：nginx.conf里面配置</li></ol><blockquote><p>后端的 ip +后端口 之后 最后必须有 <code>/</code>，而且最后的最后必须要带上<code>;</code></p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846838916nginx4.png" alt="nginx"></p><blockquote><p>如果不带<code>;</code> nginx命令会不生效；</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846922917nginx5.png" alt="nginx"></p><blockquote><p>如果不带 <code>/ </code>；接口地址为404；</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846964974nginx6.png" alt="nginx"></p><ol start="6"><li>修改前端的请求接口</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847108917nginx7.png" alt="nginx"></p><ol start="7"><li>将前端文件放到<code>nginx文件的html目录下</code>(也可以不放，见下文的补充)</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847187916nginx8.png" alt="nginx"></p><ol start="8"><li>重新加载一下<code>nginx -s reload</code>，然后在浏览器输入 <code>localhost/myDemo.html</code></li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847224916nginx9.png" alt="nginx"></p><blockquote><p>未经过反向代理的接口为：</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847268916nginx10.png" alt="nginx"></p><h4 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h4><blockquote><p>上面第7步中，也可以不将前端文件放到<code>nginx文件的html目录下</code></p></blockquote><ol><li>项目通过<code>vsCode</code>插件<code>Live Server</code>起一个本地服务，地址是<code>127.0.0.1:5500</code>，<strong>然后这个服务就不能关掉了</strong>，当然页面可以关；</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847329917nginx11.png" alt="nginx"></p><ol start="2"><li>修改<code>nginx</code>的配置文件</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847383916nginx12.png" alt="nginx"></p><ol start="3"><li>重新加载一下<code>nginx -s reload</code>，然后在浏览器输入 <code>localhost/myDemo.html</code></li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847420916nginx13.png" alt="nginx"></p><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://juejin.cn/post/7024799741120610318">关于Jsonp跨域，你知道多少？</a></p><p><a href="https://blog.csdn.net/weixin_40967353/article/details/107935984?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2.pc_relevant_default&utm_relevant_index=5">jsonp解决跨域问题（简单易懂）</a></p><p><a href="https://www.cnblogs.com/zjdyl/p/15620929.html">jsonp劫持</a></p><p><a href="https://juejin.cn/post/7021433082691452936">前端解决跨域，nginx 反向代理</a></p><p><a href="https://blog.csdn.net/envon123/article/details/83270277">正确的Nginx跨域配置</a></p><p><a href="https://juejin.cn/post/7027378324611530759">前端本地开发如何靠自己解决跨域</a></p>]]></content>
+        <content type="html"><![CDATA[<h2 id="什么是跨域"><a href="#什么是跨域" class="headerlink" title="什么是跨域"></a>什么是跨域</h2><ul><li><p>由于浏览器的同源策略限制，当一个请求<code>url</code>的<strong>协议、域名、端口</strong>三者之间任意一个与当前页面<code>url</code>不同时，需要跨域才能成功访问；</p></li><li><p>同源策略是<strong>浏览器的行为</strong>，是浏览器最核心也最基本的<strong>安全功能</strong>；</p></li></ul><h2 id="前端解决跨域方法"><a href="#前端解决跨域方法" class="headerlink" title="前端解决跨域方法"></a>前端解决跨域方法</h2><blockquote><p>其实跨域问题都是找后端解决的；</p></blockquote><h3 id="误区：前端通过jsonp解决跨域"><a href="#误区：前端通过jsonp解决跨域" class="headerlink" title="误区：前端通过jsonp解决跨域"></a>误区：前端通过jsonp解决跨域</h3><h4 id="原生写法"><a href="#原生写法" class="headerlink" title="原生写法"></a>原生写法</h4><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>创建一个script标签</span><br><span class="line"><span class="keyword">var</span> os=<span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;script&quot;</span>)</span><br><span class="line"><span class="number">2.</span>给script一个src,src就是地址</span><br><span class="line">os.<span class="property">src</span>=<span class="string">&quot;http://suggestion.baidu.com/su?cb=qwer&amp;wd=123&quot;</span></span><br><span class="line"><span class="number">3.</span>将script插入到页面</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(os)</span><br><span class="line"><span class="number">4.</span>回调函数处理数据</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">qwer</span>(<span class="params">d</span>)&#123;</span><br><span class="line">    <span class="comment">//d就是后端返回的数据</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure><h4 id="ajax请求"><a href="#ajax请求" class="headerlink" title="ajax请求"></a>ajax请求</h4><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">$.<span class="title function_">ajax</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>:<span class="string">&quot;http://suggestion.baidu.com/su?&quot;</span>,</span><br><span class="line">    <span class="attr">type</span>:<span class="string">&quot;get&quot;</span>,</span><br><span class="line">    <span class="attr">dataType</span>:<span class="string">&quot;jsonp&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>:&#123;</span><br><span class="line">        <span class="attr">wd</span>:<span class="string">&quot;123&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">jsonp</span>:<span class="string">&quot;cb&quot;</span>,<span class="comment">// 回调参数key</span></span><br><span class="line">    <span class="attr">jsonpCallback</span>:<span class="string">&quot;test&quot;</span>,<span class="comment">// 回调函数value</span></span><br><span class="line">    <span class="attr">success</span>:<span class="keyword">function</span>(<span class="params">res</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">error</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;error&quot;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656846360917ky.png" alt="jsonp"></p><h4 id="jsonp实现原理"><a href="#jsonp实现原理" class="headerlink" title="jsonp实现原理"></a>jsonp实现原理</h4><ul><li><p>动态生成script标签，通过src属性来加载；</p></li><li><p>默认使用<code>Jsonp</code>进行跨域时，请求的url地址后面会自动带上一个<code>callback=xxx</code>传给后端，后端需要对返回给前端的<code>json</code>数据做处理，此处的<code>callback</code>可通过<code>jsonp</code>来自定义，<code>xxx</code>可通过<code>jsonpCallback</code>来自定义；</p></li><li><p><code>jsonp</code>: 回调函数的参数，是与后端约定好的参数，必须与后端保持一致。不另外定义<code>jsonp</code>的话，一般默认为<code>jsonp:&#39;callback&#39;</code></p></li><li><p><code>jsonpCallback</code>: 回调函数名，用来包裹住<code>json</code>数据，不另外定义的话，这个参数的值往往是随机生成的。</p></li><li><p>按照上面百度搜索的<code>jsonp</code>来举例子：<code>http://suggestion.baidu.com/su?cb=test</code>；其中<code>?cb=test</code>中的<code>cb</code>为<code>key</code>，<code>test</code>为<code>value</code>；</p></li><li><p>前端会传递一个callback参数（key）给后端，接着后端返回数据时会将这个callback参数的值（value）作为函数名来包裹住json数据，最终返给前端的就是一段js代码了；</p></li><li><p>客户端需要将函数名称传递到服务器 可以如下实现：</p></li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//前端</span></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">data</span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;客户端的函数调用了&quot;</span>)</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;http://localhost:3000/test?callback=fn&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//后端</span></span><br><span class="line"><span class="comment">//路由配置</span></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/test&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> fnName = req.<span class="property">query</span>.<span class="property">callback</span>;</span><br><span class="line">  <span class="keyword">var</span> result = fnName + <span class="string">&#x27;(&#123;name:&quot;zhangsan&quot;&#125;)&#x27;</span>;</span><br><span class="line">  res.<span class="title function_">send</span>(result);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h4 id="结论"><a href="#结论" class="headerlink" title="结论"></a>结论</h4><ol><li>jsonp方法的实现是需要前端和后端配合的；</li><li>jsonp只支持get请求，不支持post请求；</li><li>jsonp有安全性问题：jsonp劫持，jsonp劫持属于CSRF漏洞；</li></ol><h3 id="前端通过代理解决跨域"><a href="#前端通过代理解决跨域" class="headerlink" title="前端通过代理解决跨域"></a>前端通过代理解决跨域</h3><blockquote><p>反向代理有很多，可以用nodejs，可以用nginx，这里只介绍nginx</p></blockquote><h4 id="nginx-反向代理"><a href="#nginx-反向代理" class="headerlink" title="nginx 反向代理"></a>nginx 反向代理</h4><blockquote><p>由于同源策略是浏览器导致的；所以可以找一个<strong>中间代理服务器</strong>；使用这个中间代理服务器去请求后端的地址；因为服务和服务之间是不存在同源策略的，所以中间代理服务器可以请求到后端接口数据；最后前端请求中间代理服务器；</p></blockquote><figure class="highlight js"><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"><span class="comment">//常用命令</span></span><br><span class="line">start nginx 开启</span><br><span class="line">nginx -s stop 停止</span><br><span class="line">nginx -s reload 重新加载</span><br></pre></td></tr></table></figure><ol><li>官网下载稳定版</li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">http://nginx.org/en/download.html</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656846395917nginx.png" alt="nginx"></p><ol start="2"><li>在根目录下，输入<code>cmd</code>打开终端</li></ol><p><img src="https://img.fsllala.top/1656846458918nginx2.png" alt="nginx"></p><ol start="3"><li>在终端中使用指令<code>start nginx</code>开启nginx</li><li>在浏览器输入<code>localhost</code>，出现如下界面即代表开启成功</li></ol><p><img src="https://img.fsllala.top/1656846752917nginx3.png" alt="nginx"></p><ol start="5"><li>配置nginx ：nginx.conf里面配置</li></ol><blockquote><p>后端的 ip +后端口 之后 最后必须有 <code>/</code>，而且最后的最后必须要带上<code>;</code></p></blockquote><p><img src="https://img.fsllala.top/1656846838916nginx4.png" alt="nginx"></p><blockquote><p>如果不带<code>;</code> nginx命令会不生效；</p></blockquote><p><img src="https://img.fsllala.top/1656846922917nginx5.png" alt="nginx"></p><blockquote><p>如果不带 <code>/ </code>；接口地址为404；</p></blockquote><p><img src="https://img.fsllala.top/1656846964974nginx6.png" alt="nginx"></p><ol start="6"><li>修改前端的请求接口</li></ol><p><img src="https://img.fsllala.top/1656847108917nginx7.png" alt="nginx"></p><ol start="7"><li>将前端文件放到<code>nginx文件的html目录下</code>(也可以不放，见下文的补充)</li></ol><p><img src="https://img.fsllala.top/1656847187916nginx8.png" alt="nginx"></p><ol start="8"><li>重新加载一下<code>nginx -s reload</code>，然后在浏览器输入 <code>localhost/myDemo.html</code></li></ol><p><img src="https://img.fsllala.top/1656847224916nginx9.png" alt="nginx"></p><blockquote><p>未经过反向代理的接口为：</p></blockquote><p><img src="https://img.fsllala.top/1656847268916nginx10.png" alt="nginx"></p><h4 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h4><blockquote><p>上面第7步中，也可以不将前端文件放到<code>nginx文件的html目录下</code></p></blockquote><ol><li>项目通过<code>vsCode</code>插件<code>Live Server</code>起一个本地服务，地址是<code>127.0.0.1:5500</code>，<strong>然后这个服务就不能关掉了</strong>，当然页面可以关；</li></ol><p><img src="https://img.fsllala.top/1656847329917nginx11.png" alt="nginx"></p><ol start="2"><li>修改<code>nginx</code>的配置文件</li></ol><p><img src="https://img.fsllala.top/1656847383916nginx12.png" alt="nginx"></p><ol start="3"><li>重新加载一下<code>nginx -s reload</code>，然后在浏览器输入 <code>localhost/myDemo.html</code></li></ol><p><img src="https://img.fsllala.top/1656847420916nginx13.png" alt="nginx"></p><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://juejin.cn/post/7024799741120610318">关于Jsonp跨域，你知道多少？</a></p><p><a href="https://blog.csdn.net/weixin_40967353/article/details/107935984?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2.pc_relevant_default&utm_relevant_index=5">jsonp解决跨域问题（简单易懂）</a></p><p><a href="https://www.cnblogs.com/zjdyl/p/15620929.html">jsonp劫持</a></p><p><a href="https://juejin.cn/post/7021433082691452936">前端解决跨域，nginx 反向代理</a></p><p><a href="https://blog.csdn.net/envon123/article/details/83270277">正确的Nginx跨域配置</a></p><p><a href="https://juejin.cn/post/7027378324611530759">前端本地开发如何靠自己解决跨域</a></p>]]></content>
       
       
       <categories>
@@ -473,7 +473,7 @@
       <link href="/articles/5ca213d8.html"/>
       <url>/articles/5ca213d8.html</url>
       
-        <content type="html"><![CDATA[<h2 id="Suspense"><a href="#Suspense" class="headerlink" title="Suspense"></a>Suspense</h2><ul><li>等待异步组件时渲染一些额外内容，让应用有更好的用户体验(内置组件，不需要引入)</li><li>其实和2.x中的路由懒加载差不多</li></ul><blockquote><p>传统写法：效果就是 只要 子组件 还没有 引入成功，整个父组件都不会进行渲染，即所有DOM一起渲染，父组件于子组件视图一起展示 (网络慢的时候明显)</p><p>缺点：页面加载慢，加载的快慢取决于 最慢的那个加载的速度 (木桶原理既视感…)</p></blockquote><figure class="highlight jsx"><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">&lt;template&gt;</span><br><span class="line">&lt;!-- 父组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>this is parent<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">i-son</span>&gt;</span><span class="tag">&lt;/<span class="name">i-son</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> iSon <span class="keyword">from</span> <span class="string">&quot;./injectSon.vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123;iSon&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><figure class="highlight jsx"><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></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 子组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is son<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>异步加载组件：子组件不需要改变，父组件引入<code>defineAsyncComponent</code>，来实现异步组件的加载，即先加载父组件，然后在加载 子组件 (网络慢的时候明显)</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 父组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>this is parent<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">i-son</span>&gt;</span><span class="tag">&lt;/<span class="name">i-son</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// import iSon from &quot;./injectSon.vue&quot;;    //同步引入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;defineAsyncComponent&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;  </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> iSon = <span class="title function_">defineAsyncComponent</span>(<span class="function">()=&gt;</span><span class="keyword">import</span>(<span class="string">&quot;./injectSon.vue&quot;</span>)); <span class="comment">//异步引入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123;iSon&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>但是以上写法，还是有点问题的，因为 如果 有一个子组件加载的特别特别慢，用户可能以为没东西了呢，其实是因为加载的太慢，还没加载出来，此时<code>Suspense</code>横空出世(据说还不是很稳定目前 2022&#x2F;3&#x2F;24)</p></blockquote><blockquote><p>Suspense底层是通过具名插槽实现的，所以我们写的时候，需要用<code>template</code>包裹，一个是 <code>v-slot:default</code> 用来放置真正要展示的数据；一个是 <code>v-slot:fallback</code> 用来放置 提示 加载中 之类的东西；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 父组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>this is parent<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  &lt;!-- <span class="title class_">Suspense</span>是内置组件,不需要再引入 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">Suspense</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="comment">&lt;!-- 内置封装了两个实名插槽,实名插槽需要用template包裹 --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:default</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">i-son</span>&gt;</span><span class="tag">&lt;/<span class="name">i-son</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:fallback</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">h3</span>&gt;</span>加载中~~~<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">Suspense</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// import iSon from &quot;./injectSon.vue&quot;;    //同步引入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; defineAsyncComponent &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> iSon = <span class="title function_">defineAsyncComponent</span>(<span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&quot;./injectSon.vue&quot;</span>)); <span class="comment">//异步引入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123; iSon &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>效果如下图所示</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656846104915suspense.gif" alt="Suspense"></p>]]></content>
+        <content type="html"><![CDATA[<h2 id="Suspense"><a href="#Suspense" class="headerlink" title="Suspense"></a>Suspense</h2><ul><li>等待异步组件时渲染一些额外内容，让应用有更好的用户体验(内置组件，不需要引入)</li><li>其实和2.x中的路由懒加载差不多</li></ul><blockquote><p>传统写法：效果就是 只要 子组件 还没有 引入成功，整个父组件都不会进行渲染，即所有DOM一起渲染，父组件于子组件视图一起展示 (网络慢的时候明显)</p><p>缺点：页面加载慢，加载的快慢取决于 最慢的那个加载的速度 (木桶原理既视感…)</p></blockquote><figure class="highlight jsx"><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">&lt;template&gt;</span><br><span class="line">&lt;!-- 父组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>this is parent<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">i-son</span>&gt;</span><span class="tag">&lt;/<span class="name">i-son</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> iSon <span class="keyword">from</span> <span class="string">&quot;./injectSon.vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123;iSon&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><figure class="highlight jsx"><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></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 子组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is son<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>异步加载组件：子组件不需要改变，父组件引入<code>defineAsyncComponent</code>，来实现异步组件的加载，即先加载父组件，然后在加载 子组件 (网络慢的时候明显)</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 父组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>this is parent<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">i-son</span>&gt;</span><span class="tag">&lt;/<span class="name">i-son</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// import iSon from &quot;./injectSon.vue&quot;;    //同步引入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;defineAsyncComponent&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;  </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> iSon = <span class="title function_">defineAsyncComponent</span>(<span class="function">()=&gt;</span><span class="keyword">import</span>(<span class="string">&quot;./injectSon.vue&quot;</span>)); <span class="comment">//异步引入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123;iSon&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>但是以上写法，还是有点问题的，因为 如果 有一个子组件加载的特别特别慢，用户可能以为没东西了呢，其实是因为加载的太慢，还没加载出来，此时<code>Suspense</code>横空出世(据说还不是很稳定目前 2022&#x2F;3&#x2F;24)</p></blockquote><blockquote><p>Suspense底层是通过具名插槽实现的，所以我们写的时候，需要用<code>template</code>包裹，一个是 <code>v-slot:default</code> 用来放置真正要展示的数据；一个是 <code>v-slot:fallback</code> 用来放置 提示 加载中 之类的东西；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 父组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>this is parent<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  &lt;!-- <span class="title class_">Suspense</span>是内置组件,不需要再引入 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">Suspense</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="comment">&lt;!-- 内置封装了两个实名插槽,实名插槽需要用template包裹 --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:default</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">i-son</span>&gt;</span><span class="tag">&lt;/<span class="name">i-son</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:fallback</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">h3</span>&gt;</span>加载中~~~<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">Suspense</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// import iSon from &quot;./injectSon.vue&quot;;    //同步引入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; defineAsyncComponent &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> iSon = <span class="title function_">defineAsyncComponent</span>(<span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&quot;./injectSon.vue&quot;</span>)); <span class="comment">//异步引入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123; iSon &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>效果如下图所示</p></blockquote><p><img src="https://img.fsllala.top/1656846104915suspense.gif" alt="Suspense"></p>]]></content>
       
       
       <categories>
@@ -500,7 +500,7 @@
       <link href="/articles/6d48bcfd.html"/>
       <url>/articles/6d48bcfd.html</url>
       
-        <content type="html"><![CDATA[<h2 id="provide与inject"><a href="#provide与inject" class="headerlink" title="provide与inject"></a>provide与inject</h2><ul><li>作用： 实现祖孙组件的通信(其实 所有的后代都能接受到数据，隔了多少代都可以，一代也不搁的也可以)</li><li>用法：父组件有一个<code>provide</code>来提供数据，后代组件有一个<code>inject</code>来接收数据；</li></ul><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 爷爷组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>this is grandParent<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;price&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">i-son</span>&gt;</span><span class="tag">&lt;/<span class="name">i-son</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; provide, reactive, toRefs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> iSon <span class="keyword">from</span> <span class="string">&quot;./injectSon.vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123;iSon&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//声明响应式数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> car = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">name</span>: <span class="string">&quot;奔驰&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">price</span>: <span class="string">&quot;40W&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 将自己的数据传给后代组件(所有的后代都能接受到,隔了多少代都可以)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">provide</span>(<span class="string">&quot;myCar&quot;</span>,car);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        ...<span class="title function_">toRefs</span>(car)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 孙组件,中间还隔了一个父组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is grandSon<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;price&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; inject, toRefs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> car = <span class="title function_">inject</span>(<span class="string">&quot;myCar&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(car);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 直接将获取到的响应式数据,解构;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      ...<span class="title function_">toRefs</span>(car),</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845154916provide.png" alt="inject"></p>]]></content>
+        <content type="html"><![CDATA[<h2 id="provide与inject"><a href="#provide与inject" class="headerlink" title="provide与inject"></a>provide与inject</h2><ul><li>作用： 实现祖孙组件的通信(其实 所有的后代都能接受到数据，隔了多少代都可以，一代也不搁的也可以)</li><li>用法：父组件有一个<code>provide</code>来提供数据，后代组件有一个<code>inject</code>来接收数据；</li></ul><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 爷爷组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>this is grandParent<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;price&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">i-son</span>&gt;</span><span class="tag">&lt;/<span class="name">i-son</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; provide, reactive, toRefs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> iSon <span class="keyword">from</span> <span class="string">&quot;./injectSon.vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123;iSon&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//声明响应式数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> car = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">name</span>: <span class="string">&quot;奔驰&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">price</span>: <span class="string">&quot;40W&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 将自己的数据传给后代组件(所有的后代都能接受到,隔了多少代都可以)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">provide</span>(<span class="string">&quot;myCar&quot;</span>,car);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        ...<span class="title function_">toRefs</span>(car)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 孙组件,中间还隔了一个父组件 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is grandSon<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;price&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; inject, toRefs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> car = <span class="title function_">inject</span>(<span class="string">&quot;myCar&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(car);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 直接将获取到的响应式数据,解构;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      ...<span class="title function_">toRefs</span>(car),</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656845154916provide.png" alt="inject"></p>]]></content>
       
       
       <categories>
@@ -527,7 +527,7 @@
       <link href="/articles/7db1b1fe.html"/>
       <url>/articles/7db1b1fe.html</url>
       
-        <content type="html"><![CDATA[<h1 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h1><blockquote><p>监听<strong>响应式</strong>数据的变化，才能够被watch所监听到；</p></blockquote><div class="tabs" id="vuewatch"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#vuewatch-1">vue2.x</button></li><li class="tab"><button type="button" data-href="#vuewatch-2">vue3.0</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="vuewatch-1"><h2 id="vue2中的watch函数"><a href="#vue2中的watch函数" class="headerlink" title="vue2中的watch函数"></a>vue2中的watch函数</h2><blockquote><p>vue2中的<strong>响应式</strong>数据是写在<code>data</code>、<code>computed</code>或者<code>props</code>接收的数据；才能够被watch所监听到</p></blockquote><h3 id="基本写法"><a href="#基本写法" class="headerlink" title="基本写法"></a>基本写法</h3><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; sum &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sum++&quot;</span>&gt;</span>点我加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">sum</span>: <span class="number">1</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">watch</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">sum</span>(<span class="params">newValue, oldValue</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h3 id="进阶写法"><a href="#进阶写法" class="headerlink" title="进阶写法"></a>进阶写法</h3><blockquote><p>相比较，就是<code>handler</code>把原来的监听对象替换了，原来的监听对象以对象形式套在外面；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">sum</span>: <span class="string">&quot;1&quot;</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">watch</span>: &#123;</span><br><span class="line">    <span class="attr">sum</span>: &#123;</span><br><span class="line">      <span class="attr">immediate</span>: <span class="literal">true</span>,  <span class="comment">//上来自动执行一次</span></span><br><span class="line">      <span class="attr">deep</span>:<span class="literal">true</span>,  <span class="comment">//深度监听(数据是多层级的时候用)</span></span><br><span class="line">      <span class="title function_">handler</span>(<span class="params">newValue, oldValue</span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="vuewatch-2"><h2 id="vue3中的watch函数"><a href="#vue3中的watch函数" class="headerlink" title="vue3中的watch函数"></a>vue3中的watch函数</h2><blockquote><p>vue3中的<strong>响应式</strong>数据是被<code>ref</code>或者<code>reactive</code>包裹起来的数据；才能够被watch所监听到；</p><p>watch按需导入：<code>import { watch } from &quot;vue&quot;;</code></p></blockquote><h3 id="ref定义的一个响应式数据"><a href="#ref定义的一个响应式数据" class="headerlink" title="ref定义的一个响应式数据"></a>ref定义的一个响应式数据</h3><blockquote><p>ref不需要.value，因为watch监听的是一个响应式数据，如果.value了，监听的就不是<code>proxy</code>代理的对象；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref,watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 响应式数据</span></span><br><span class="line">    <span class="keyword">let</span> sum = <span class="title function_">ref</span>(<span class="number">1</span>);</span><br><span class="line">    <span class="comment">// watch监听 (这是一种行为,而不是数据,所以不需要返回值)</span></span><br><span class="line">    <span class="comment">// watch() 两个参数,第一个是监听对象，对二个是回调函数</span></span><br><span class="line">    <span class="title function_">watch</span>(sum, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span>&#123;</span><br><span class="line">        sum,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="ref定义的多个响应式数据"><a href="#ref定义的多个响应式数据" class="headerlink" title="ref定义的多个响应式数据"></a>ref定义的多个响应式数据</h3><blockquote><p>方式一：有几个写几个watch</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 响应式数据</span></span><br><span class="line">    <span class="keyword">let</span> sum = <span class="title function_">ref</span>(<span class="number">1</span>);</span><br><span class="line">    <span class="keyword">let</span> msg = <span class="title function_">ref</span>(<span class="string">&quot;hello&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>(sum, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>(msg, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      sum,</span><br><span class="line">      msg,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><blockquote><p>方式二：第一个参数写成数组的形式，里面放入ref响应式对象；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; sum &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sum++&quot;</span>&gt;</span>点我加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;msg += &#x27;!&#x27;&quot;</span>&gt;</span>点我加!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; ref, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 响应式数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> sum = <span class="title function_">ref</span>(<span class="number">1</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> msg = <span class="title function_">ref</span>(<span class="string">&quot;hello&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">watch</span>([sum,msg], <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      sum,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      msg,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656843723917watch.png" alt="watch"></p><h3 id="ref定义的对象"><a href="#ref定义的对象" class="headerlink" title="ref定义的对象"></a>ref定义的对象</h3><blockquote><p>watch监听ref定义的引用数据类型时,需要开启深度监听；reactive不需要开启,因为reactive源码中默认开启了深度监听；</p><p>watch监听的如果是引用数据类型，那么newVal和oldVal的值是一样的；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;message.foo.bar.name&quot;&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot;&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script  lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; ref, reactive, watch &#125; from &#x27;vue&#x27;;</span><br><span class="line">export default &#123;</span><br><span class="line">  setup() &#123;</span><br><span class="line">    // 响应式数据</span><br><span class="line">    const message = ref(&#123;</span><br><span class="line">      foo: &#123;</span><br><span class="line">        bar: &#123;</span><br><span class="line">          name: &quot;fsllala&quot;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    // watch监听ref定义的引用数据类型时,需要开启深度监听;reactive不需要开启,因为reactive源码中默认开启了深度监听;</span><br><span class="line">    watch(message, (newVal, oldVal) =&gt; &#123;</span><br><span class="line">      console.log(newVal, oldVal);</span><br><span class="line">    &#125;, &#123; deep: true &#125;)</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line">      message,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure><h3 id="监听reactive定义的一个响应式数据的全部属性"><a href="#监听reactive定义的一个响应式数据的全部属性" class="headerlink" title="监听reactive定义的一个响应式数据的全部属性"></a>监听reactive定义的一个响应式数据的全部属性</h3><blockquote><p>watch监听的如果是引用数据类型，那么newVal和oldVal的值是一样的；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; person.age &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;person.age++&quot;</span>&gt;</span>点我加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; person.name &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;person.name += &#x27;!&#x27;&quot;</span>&gt;</span>点我加!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; reactive, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">watch</span>(person, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      person,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656843942917watch1.png" alt="watch"></p><blockquote><p>上面问题，目前还无法解决。。。</p><p>但是其实可以将需要用到 oldValue 的 数据写成 ref的，即可解决；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, reactive, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> age = <span class="title function_">ref</span>(<span class="number">18</span>);</span><br><span class="line">    <span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="comment">// 假如我需要监听 age的 oldvalue,我写成ref的形式</span></span><br><span class="line">    <span class="title function_">watch</span>(age, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>(person, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      person,</span><br><span class="line">      age,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><blockquote><p>reactive还有个问题就是：当监听<strong>全部</strong>属性的时候 <code>强制</code>开启了深度监听，<code>deep:false</code>也关不掉；会影响效率</p></blockquote><h3 id="监听reactive定义的一个响应式数据中的单一属性"><a href="#监听reactive定义的一个响应式数据中的单一属性" class="headerlink" title="监听reactive定义的一个响应式数据中的单一属性"></a>监听reactive定义的一个响应式数据中的单一属性</h3><blockquote><p>第一个参数直接写 <code>对象.属性</code>是不行滴，因为他不是<code>proxy</code>代理的对象，需要写成<code>()=&gt;对象.属性</code>的回调函数 形式；</p><p>值的一提的是，这样监听 reactive的单一属性，是可以检测到<code> oldValue</code>的；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, reactive, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">      <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>(<span class="function">()=&gt;</span>person.<span class="property">age</span>, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      person,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="监听reactive定义的一个响应式数据中的某些属性"><a href="#监听reactive定义的一个响应式数据中的某些属性" class="headerlink" title="监听reactive定义的一个响应式数据中的某些属性"></a>监听reactive定义的一个响应式数据中的某些属性</h3><blockquote><p>这个<code>oldValue</code>也可以监听到，只要不是监听全部的属性，都可以监听到<code>oldValue</code></p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, reactive, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">      <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>([<span class="function">()=&gt;</span>person.<span class="property">name</span>,<span class="function">()=&gt;</span>person.<span class="property">age</span>], <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      person,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="特殊情况"><a href="#特殊情况" class="headerlink" title="特殊情况"></a>特殊情况</h3><blockquote><p>监听的是一个属性，但是这个属性又是一个对象，需要用到<code>深度监听</code>；因为是个对象，所以<code>oldValue</code>监听不到；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, reactive, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">      <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">      <span class="attr">job</span>:&#123;</span><br><span class="line">          <span class="attr">a</span>:&#123;</span><br><span class="line">              <span class="attr">b</span>:<span class="string">&quot;web&quot;</span></span><br><span class="line">          &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>([<span class="function">()=&gt;</span>person.<span class="property">job</span>], <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;,&#123;<span class="attr">deep</span>:<span class="literal">true</span>&#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      person,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h2 id="vue3中的watchEffect函数"><a href="#vue3中的watchEffect函数" class="headerlink" title="vue3中的watchEffect函数"></a>vue3中的watchEffect函数</h2><blockquote><p>跟watch是不一样的，watchEffect是非惰性的，watchEffect一开始会自己自调用一次；</p><p>立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数；</p><p>如果用到 message 就只会监听 message ；就是用到几个监听几个 而且是非惰性 会默认调用一次；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;message&quot;&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;message2&quot;&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;objMessage.name&quot;&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; ref, reactive, watchEffect &#125; from &#x27;vue&#x27;;</span><br><span class="line"></span><br><span class="line">let message = ref&lt;string&gt;(&quot;vue3.2&quot;);</span><br><span class="line">let message2 = ref&lt;string&gt;(&quot;TS泛型&quot;);</span><br><span class="line">const objMessage = reactive(&#123;</span><br><span class="line">  name: &quot;fsllala&quot;,</span><br><span class="line">  age: 18</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">watchEffect(() =&gt; &#123;</span><br><span class="line">  /**</span><br><span class="line">   * watchEffect 这里ref需要加.value,因为如果不加.value,监听的是一个RefImpl对象,他的引用地址是不会变的;</span><br><span class="line">   * 同理如果监听的是一个响应式数据,例如objMessage,即使里面的name改变了,也不会监听到,因为objMessage的引用地址是没变的;</span><br><span class="line">   * */ </span><br><span class="line">  // 监听谁,写在这里面就好了,会立即执行一次;</span><br><span class="line">  console.log(&quot;message=====&quot;, message);</span><br><span class="line">  console.log(&quot;message2=====&quot;, message2.value);</span><br><span class="line">  console.log(&quot;objMessage=====&quot;, objMessage.name);</span><br><span class="line">&#125;)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure><h3 id="清除副作用"><a href="#清除副作用" class="headerlink" title="清除副作用"></a>清除副作用</h3><blockquote><p>就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, reactive, watchEffect &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> message = ref&lt;<span class="built_in">string</span>&gt;(<span class="string">&quot;vue3.2&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> message2 = ref&lt;<span class="built_in">string</span>&gt;(<span class="string">&quot;TS泛型&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> objMessage = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title function_">watchEffect</span>(<span class="function">(<span class="params">fsl</span>) =&gt;</span> &#123;</span><br><span class="line"><span class="comment">// 数据改变的时候,会先打印 before~</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;message=====&quot;</span>, message.<span class="property">value</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;message2=====&quot;</span>, message2.<span class="property">value</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;objMessage=====&quot;</span>, objMessage.<span class="property">name</span>);</span><br><span class="line">  <span class="title function_">fsl</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;before~&quot;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="停止监听"><a href="#停止监听" class="headerlink" title="停止监听"></a>停止监听</h3><blockquote><p>停止跟踪 ：watchEffect 返回一个函数 ，调用之后将停止更新；</p><p>离开界面可以做停止监听；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;message&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;stopWatch&quot;</span>&gt;</span>stopWatch<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; ref, reactive, watchEffect &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">let</span> message = ref&lt;string&gt;(<span class="string">&quot;vue3.2&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// watchEffect返回一个停止监听的函数,调用了就不会监听了;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> stop = <span class="title function_">watchEffect</span>(<span class="function">(<span class="params">fsl</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;message=====&quot;</span>, message.<span class="property">value</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title function_">stopWatch</span>=(<span class="params"></span>)=&gt;<span class="title function_">stop</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h3 id="更多的配置项"><a href="#更多的配置项" class="headerlink" title="更多的配置项"></a>更多的配置项</h3><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;message&quot;</span> <span class="attr">id</span>=<span class="string">&quot;inputId&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; ref, reactive, watchEffect &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">let</span> message = ref&lt;string&gt;(<span class="string">&quot;vue3.2&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">// watchEffect 不加 &#123; flush: &quot;post&quot; &#125; ,domID获取不到,因为setup中dom还没渲染,所以为null;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">let</span> <span class="attr">domID</span>: <span class="title class_">HTMLInputElement</span> = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;inputId&#x27;</span>) <span class="keyword">as</span> <span class="title class_">HTMLInputElement</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;message=====&quot;</span>, message.<span class="property">value</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;inputId=====&quot;</span>, domID);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;, &#123; <span class="attr">flush</span>: <span class="string">&quot;post&quot;</span> &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p><strong>断言 (assertion)</strong> 是一种在程序中的一阶逻辑 (如：一个结果为真或假的逻辑判断式)，目的为了表示与验证软件开发者预期的结果 —— 当程序执行到断言的位置时，对应的断言应该为真。若断言不为真时，程序会中止执行，并给出错误信息。</p></blockquote><table><thead><tr><th align="left"></th><th align="left">pre</th><th align="left">sync</th><th align="left">post</th></tr></thead><tbody><tr><td align="left">更新时机</td><td align="left">组件<strong>更新前</strong>执行</td><td align="left">强制效果始终同步触发</td><td align="left">组件<strong>更新后</strong>执行</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>]]></content>
+        <content type="html"><![CDATA[<h1 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h1><blockquote><p>监听<strong>响应式</strong>数据的变化，才能够被watch所监听到；</p></blockquote><div class="tabs" id="vuewatch"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#vuewatch-1">vue2.x</button></li><li class="tab"><button type="button" data-href="#vuewatch-2">vue3.0</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="vuewatch-1"><h2 id="vue2中的watch函数"><a href="#vue2中的watch函数" class="headerlink" title="vue2中的watch函数"></a>vue2中的watch函数</h2><blockquote><p>vue2中的<strong>响应式</strong>数据是写在<code>data</code>、<code>computed</code>或者<code>props</code>接收的数据；才能够被watch所监听到</p></blockquote><h3 id="基本写法"><a href="#基本写法" class="headerlink" title="基本写法"></a>基本写法</h3><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; sum &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sum++&quot;</span>&gt;</span>点我加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">sum</span>: <span class="number">1</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">watch</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">sum</span>(<span class="params">newValue, oldValue</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h3 id="进阶写法"><a href="#进阶写法" class="headerlink" title="进阶写法"></a>进阶写法</h3><blockquote><p>相比较，就是<code>handler</code>把原来的监听对象替换了，原来的监听对象以对象形式套在外面；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">sum</span>: <span class="string">&quot;1&quot;</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">watch</span>: &#123;</span><br><span class="line">    <span class="attr">sum</span>: &#123;</span><br><span class="line">      <span class="attr">immediate</span>: <span class="literal">true</span>,  <span class="comment">//上来自动执行一次</span></span><br><span class="line">      <span class="attr">deep</span>:<span class="literal">true</span>,  <span class="comment">//深度监听(数据是多层级的时候用)</span></span><br><span class="line">      <span class="title function_">handler</span>(<span class="params">newValue, oldValue</span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="vuewatch-2"><h2 id="vue3中的watch函数"><a href="#vue3中的watch函数" class="headerlink" title="vue3中的watch函数"></a>vue3中的watch函数</h2><blockquote><p>vue3中的<strong>响应式</strong>数据是被<code>ref</code>或者<code>reactive</code>包裹起来的数据；才能够被watch所监听到；</p><p>watch按需导入：<code>import { watch } from &quot;vue&quot;;</code></p></blockquote><h3 id="ref定义的一个响应式数据"><a href="#ref定义的一个响应式数据" class="headerlink" title="ref定义的一个响应式数据"></a>ref定义的一个响应式数据</h3><blockquote><p>ref不需要.value，因为watch监听的是一个响应式数据，如果.value了，监听的就不是<code>proxy</code>代理的对象；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref,watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 响应式数据</span></span><br><span class="line">    <span class="keyword">let</span> sum = <span class="title function_">ref</span>(<span class="number">1</span>);</span><br><span class="line">    <span class="comment">// watch监听 (这是一种行为,而不是数据,所以不需要返回值)</span></span><br><span class="line">    <span class="comment">// watch() 两个参数,第一个是监听对象，对二个是回调函数</span></span><br><span class="line">    <span class="title function_">watch</span>(sum, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span>&#123;</span><br><span class="line">        sum,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="ref定义的多个响应式数据"><a href="#ref定义的多个响应式数据" class="headerlink" title="ref定义的多个响应式数据"></a>ref定义的多个响应式数据</h3><blockquote><p>方式一：有几个写几个watch</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 响应式数据</span></span><br><span class="line">    <span class="keyword">let</span> sum = <span class="title function_">ref</span>(<span class="number">1</span>);</span><br><span class="line">    <span class="keyword">let</span> msg = <span class="title function_">ref</span>(<span class="string">&quot;hello&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>(sum, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>(msg, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      sum,</span><br><span class="line">      msg,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><blockquote><p>方式二：第一个参数写成数组的形式，里面放入ref响应式对象；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; sum &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sum++&quot;</span>&gt;</span>点我加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;msg += &#x27;!&#x27;&quot;</span>&gt;</span>点我加!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; ref, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 响应式数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> sum = <span class="title function_">ref</span>(<span class="number">1</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> msg = <span class="title function_">ref</span>(<span class="string">&quot;hello&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">watch</span>([sum,msg], <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      sum,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      msg,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656843723917watch.png" alt="watch"></p><h3 id="ref定义的对象"><a href="#ref定义的对象" class="headerlink" title="ref定义的对象"></a>ref定义的对象</h3><blockquote><p>watch监听ref定义的引用数据类型时,需要开启深度监听；reactive不需要开启,因为reactive源码中默认开启了深度监听；</p><p>watch监听的如果是引用数据类型，那么newVal和oldVal的值是一样的；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;message.foo.bar.name&quot;&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot;&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script  lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; ref, reactive, watch &#125; from &#x27;vue&#x27;;</span><br><span class="line">export default &#123;</span><br><span class="line">  setup() &#123;</span><br><span class="line">    // 响应式数据</span><br><span class="line">    const message = ref(&#123;</span><br><span class="line">      foo: &#123;</span><br><span class="line">        bar: &#123;</span><br><span class="line">          name: &quot;fsllala&quot;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    // watch监听ref定义的引用数据类型时,需要开启深度监听;reactive不需要开启,因为reactive源码中默认开启了深度监听;</span><br><span class="line">    watch(message, (newVal, oldVal) =&gt; &#123;</span><br><span class="line">      console.log(newVal, oldVal);</span><br><span class="line">    &#125;, &#123; deep: true &#125;)</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line">      message,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure><h3 id="监听reactive定义的一个响应式数据的全部属性"><a href="#监听reactive定义的一个响应式数据的全部属性" class="headerlink" title="监听reactive定义的一个响应式数据的全部属性"></a>监听reactive定义的一个响应式数据的全部属性</h3><blockquote><p>watch监听的如果是引用数据类型，那么newVal和oldVal的值是一样的；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; person.age &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;person.age++&quot;</span>&gt;</span>点我加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; person.name &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;person.name += &#x27;!&#x27;&quot;</span>&gt;</span>点我加!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; reactive, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">watch</span>(person, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      person,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656843942917watch1.png" alt="watch"></p><blockquote><p>上面问题，目前还无法解决。。。</p><p>但是其实可以将需要用到 oldValue 的 数据写成 ref的，即可解决；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, reactive, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> age = <span class="title function_">ref</span>(<span class="number">18</span>);</span><br><span class="line">    <span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="comment">// 假如我需要监听 age的 oldvalue,我写成ref的形式</span></span><br><span class="line">    <span class="title function_">watch</span>(age, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>(person, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      person,</span><br><span class="line">      age,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><blockquote><p>reactive还有个问题就是：当监听<strong>全部</strong>属性的时候 <code>强制</code>开启了深度监听，<code>deep:false</code>也关不掉；会影响效率</p></blockquote><h3 id="监听reactive定义的一个响应式数据中的单一属性"><a href="#监听reactive定义的一个响应式数据中的单一属性" class="headerlink" title="监听reactive定义的一个响应式数据中的单一属性"></a>监听reactive定义的一个响应式数据中的单一属性</h3><blockquote><p>第一个参数直接写 <code>对象.属性</code>是不行滴，因为他不是<code>proxy</code>代理的对象，需要写成<code>()=&gt;对象.属性</code>的回调函数 形式；</p><p>值的一提的是，这样监听 reactive的单一属性，是可以检测到<code> oldValue</code>的；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, reactive, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">      <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>(<span class="function">()=&gt;</span>person.<span class="property">age</span>, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      person,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="监听reactive定义的一个响应式数据中的某些属性"><a href="#监听reactive定义的一个响应式数据中的某些属性" class="headerlink" title="监听reactive定义的一个响应式数据中的某些属性"></a>监听reactive定义的一个响应式数据中的某些属性</h3><blockquote><p>这个<code>oldValue</code>也可以监听到，只要不是监听全部的属性，都可以监听到<code>oldValue</code></p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, reactive, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">      <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>([<span class="function">()=&gt;</span>person.<span class="property">name</span>,<span class="function">()=&gt;</span>person.<span class="property">age</span>], <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      person,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="特殊情况"><a href="#特殊情况" class="headerlink" title="特殊情况"></a>特殊情况</h3><blockquote><p>监听的是一个属性，但是这个属性又是一个对象，需要用到<code>深度监听</code>；因为是个对象，所以<code>oldValue</code>监听不到；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, reactive, watch &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">      <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">      <span class="attr">job</span>:&#123;</span><br><span class="line">          <span class="attr">a</span>:&#123;</span><br><span class="line">              <span class="attr">b</span>:<span class="string">&quot;web&quot;</span></span><br><span class="line">          &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">watch</span>([<span class="function">()=&gt;</span>person.<span class="property">job</span>], <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue, oldValue);</span><br><span class="line">    &#125;,&#123;<span class="attr">deep</span>:<span class="literal">true</span>&#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      person,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h2 id="vue3中的watchEffect函数"><a href="#vue3中的watchEffect函数" class="headerlink" title="vue3中的watchEffect函数"></a>vue3中的watchEffect函数</h2><blockquote><p>跟watch是不一样的，watchEffect是非惰性的，watchEffect一开始会自己自调用一次；</p><p>立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数；</p><p>如果用到 message 就只会监听 message ；就是用到几个监听几个 而且是非惰性 会默认调用一次；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;message&quot;&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;message2&quot;&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;objMessage.name&quot;&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; ref, reactive, watchEffect &#125; from &#x27;vue&#x27;;</span><br><span class="line"></span><br><span class="line">let message = ref&lt;string&gt;(&quot;vue3.2&quot;);</span><br><span class="line">let message2 = ref&lt;string&gt;(&quot;TS泛型&quot;);</span><br><span class="line">const objMessage = reactive(&#123;</span><br><span class="line">  name: &quot;fsllala&quot;,</span><br><span class="line">  age: 18</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">watchEffect(() =&gt; &#123;</span><br><span class="line">  /**</span><br><span class="line">   * watchEffect 这里ref需要加.value,因为如果不加.value,监听的是一个RefImpl对象,他的引用地址是不会变的;</span><br><span class="line">   * 同理如果监听的是一个响应式数据,例如objMessage,即使里面的name改变了,也不会监听到,因为objMessage的引用地址是没变的;</span><br><span class="line">   * */ </span><br><span class="line">  // 监听谁,写在这里面就好了,会立即执行一次;</span><br><span class="line">  console.log(&quot;message=====&quot;, message);</span><br><span class="line">  console.log(&quot;message2=====&quot;, message2.value);</span><br><span class="line">  console.log(&quot;objMessage=====&quot;, objMessage.name);</span><br><span class="line">&#125;)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure><h3 id="清除副作用"><a href="#清除副作用" class="headerlink" title="清除副作用"></a>清除副作用</h3><blockquote><p>就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, reactive, watchEffect &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> message = ref&lt;<span class="built_in">string</span>&gt;(<span class="string">&quot;vue3.2&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> message2 = ref&lt;<span class="built_in">string</span>&gt;(<span class="string">&quot;TS泛型&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> objMessage = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title function_">watchEffect</span>(<span class="function">(<span class="params">fsl</span>) =&gt;</span> &#123;</span><br><span class="line"><span class="comment">// 数据改变的时候,会先打印 before~</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;message=====&quot;</span>, message.<span class="property">value</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;message2=====&quot;</span>, message2.<span class="property">value</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;objMessage=====&quot;</span>, objMessage.<span class="property">name</span>);</span><br><span class="line">  <span class="title function_">fsl</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;before~&quot;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="停止监听"><a href="#停止监听" class="headerlink" title="停止监听"></a>停止监听</h3><blockquote><p>停止跟踪 ：watchEffect 返回一个函数 ，调用之后将停止更新；</p><p>离开界面可以做停止监听；</p></blockquote><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;message&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;stopWatch&quot;</span>&gt;</span>stopWatch<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; ref, reactive, watchEffect &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">let</span> message = ref&lt;string&gt;(<span class="string">&quot;vue3.2&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// watchEffect返回一个停止监听的函数,调用了就不会监听了;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> stop = <span class="title function_">watchEffect</span>(<span class="function">(<span class="params">fsl</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;message=====&quot;</span>, message.<span class="property">value</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title function_">stopWatch</span>=(<span class="params"></span>)=&gt;<span class="title function_">stop</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h3 id="更多的配置项"><a href="#更多的配置项" class="headerlink" title="更多的配置项"></a>更多的配置项</h3><figure class="highlight typescript"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;message&quot;</span> <span class="attr">id</span>=<span class="string">&quot;inputId&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; ref, reactive, watchEffect &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">let</span> message = ref&lt;string&gt;(<span class="string">&quot;vue3.2&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">// watchEffect 不加 &#123; flush: &quot;post&quot; &#125; ,domID获取不到,因为setup中dom还没渲染,所以为null;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">let</span> <span class="attr">domID</span>: <span class="title class_">HTMLInputElement</span> = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;inputId&#x27;</span>) <span class="keyword">as</span> <span class="title class_">HTMLInputElement</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;message=====&quot;</span>, message.<span class="property">value</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;inputId=====&quot;</span>, domID);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;, &#123; <span class="attr">flush</span>: <span class="string">&quot;post&quot;</span> &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p><strong>断言 (assertion)</strong> 是一种在程序中的一阶逻辑 (如：一个结果为真或假的逻辑判断式)，目的为了表示与验证软件开发者预期的结果 —— 当程序执行到断言的位置时，对应的断言应该为真。若断言不为真时，程序会中止执行，并给出错误信息。</p></blockquote><table><thead><tr><th align="left"></th><th align="left">pre</th><th align="left">sync</th><th align="left">post</th></tr></thead><tbody><tr><td align="left">更新时机</td><td align="left">组件<strong>更新前</strong>执行</td><td align="left">强制效果始终同步触发</td><td align="left">组件<strong>更新后</strong>执行</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>]]></content>
       
       
       <categories>
@@ -581,7 +581,7 @@
       <link href="/articles/459aa16c.html"/>
       <url>/articles/459aa16c.html</url>
       
-        <content type="html"><![CDATA[<h2 id="setup"><a href="#setup" class="headerlink" title="setup"></a>setup</h2><h3 id="Vue2中的组件传值"><a href="#Vue2中的组件传值" class="headerlink" title="Vue2中的组件传值"></a>Vue2中的组件传值</h3><blockquote><p>父传子 $attrs</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">v-child</span> <span class="attr">msg</span>=<span class="string">&quot;hello&quot;</span> <span class="attr">school</span>=<span class="string">&quot;vue2父传子&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">v-child</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> vChild <span class="keyword">from</span> <span class="string">&quot;./theChild.vue&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">components</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        vChild</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>子组件</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is child<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">props</span>:[<span class="string">&quot;msg&quot;</span>],  <span class="comment">//子组件通过props接收</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">mounted</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);  <span class="comment">//打印this</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>当子组件通过 props 接收 父组件 传过来的值时， this上的**$attrs**啥都没；</p><p>当子组件通过 props 接收 父组件 传过来的值，但并没有全部接收， this上的**$attrs**有未接收的父组件传的值；</p><p>当子组件去掉 props，即不接收父组件 传过来的值时 this上的**$attrs**有父组件传过来的值；</p><p>结论：vue2中<code>vue实例</code>中的**$attrs**可以<code>捡漏</code>父组件传过来，但<code>props</code>未接收的数据；</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845866917v2fcz.png" alt="父传子Vue2"></p><h3 id="vue3中的组件传值"><a href="#vue3中的组件传值" class="headerlink" title="vue3中的组件传值"></a>vue3中的组件传值</h3><blockquote><p>父传子</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">v-child</span> <span class="attr">msg</span>=<span class="string">&quot;hello&quot;</span> <span class="attr">school</span>=<span class="string">&quot;父传子&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">v-child</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> vChild <span class="keyword">from</span> <span class="string">&quot;./theChild.vue&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">components</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        vChild,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>子组件 setup 的第一个参数</p><p>setup外和2一样，得先用props接收一下，然后setup的第一个参数就是接收的父亲传来的值；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is child<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">props</span>: [<span class="string">&quot;msg&quot;</span>, <span class="string">&quot;school&quot;</span>],</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params">props,context</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(props);  <span class="comment">//Proxy &#123;msg: &#x27;hello&#x27;, school: &#x27;父传子&#x27;&#125;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>子组件 setup 的第二个参数 context；</p><p>context.attrs与2中的this.$attts一样，是捡漏的,即props没接收到的 ，就去context.attrs里面了；</p></blockquote><figure class="highlight jsx"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">props</span>: [<span class="string">&quot;msg&quot;</span>],</span><br><span class="line">  <span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span><br><span class="line">  <span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span><br><span class="line">    <span class="comment">// console.log(context); //上下文   主要关注其 attrs , emit , slots属性</span></span><br><span class="line">    <span class="comment">//context.attrs 相当于vue2中的 this.$attrs  捡漏的...</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(context.<span class="property">attrs</span>);  <span class="comment">//Proxy &#123;school: &#x27;父传子&#x27;, __vInternal: 1&#125;</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><blockquote><p>子传父</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">v-child</span> <span class="attr">msg</span>=<span class="string">&quot;hello&quot;</span> <span class="attr">school</span>=<span class="string">&quot;父传子&quot;</span> @<span class="attr">lala</span>=<span class="string">&quot;fsl&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">v-child</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> vChild <span class="keyword">from</span> <span class="string">&quot;./theChild.vue&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">components</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        vChild,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> <span class="title function_">fsl</span>=(<span class="params">value</span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`接收到了子组件传来的<span class="subst">$&#123;value&#125;</span>`</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            fsl,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>context.emit与2中的this.$emits一样</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//子组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is child<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;childToPatent&quot;</span>&gt;</span>子传父<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">props</span>: [<span class="string">&quot;msg&quot;</span>,<span class="string">&quot;school&quot;</span>],</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// console.log(context); //上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> <span class="title function_">childToPatent</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        context.<span class="title function_">emit</span>(<span class="string">&quot;lala&quot;</span>,<span class="number">666</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        childToPatent,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845934916v3fcz.png"></p><blockquote><p>但是这样还是不行滴，会出提示的，需要在子组件中用 <code>emits</code>解决</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//子组件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">props</span>: [<span class="string">&quot;msg&quot;</span>,<span class="string">&quot;school&quot;</span>],</span><br><span class="line">  <span class="attr">emits</span>:[<span class="string">&quot;lala&quot;</span>],</span><br><span class="line">  <span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span><br><span class="line">  <span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span><br><span class="line">    <span class="comment">// console.log(context); //上下文   主要关注其 attrs , emit , slots属性</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">childToPatent</span>=(<span class="params"></span>)=&gt;&#123;</span><br><span class="line">        context.<span class="title function_">emit</span>(<span class="string">&quot;lala&quot;</span>,<span class="number">666</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span>&#123;</span><br><span class="line">        childToPatent,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><blockquote><p>传递有名字的插槽需要用template包装起来，然后用  v-slot：xxx</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">v-child</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="comment">&lt;!-- 传递实名插槽 需要 v-slot:xxx --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:qwe</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>123<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:abc</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>123<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">v-child</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> vChild <span class="keyword">from</span> <span class="string">&quot;./theChild.vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    vChild,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>子组件</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is child<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// console.log(context); //上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(context.<span class="property">slots</span>) <span class="comment">//Proxy &#123;_: 1, __vInternal: 1, qwe: ƒ, abc: ƒ&#125;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>]]></content>
+        <content type="html"><![CDATA[<h2 id="setup"><a href="#setup" class="headerlink" title="setup"></a>setup</h2><h3 id="Vue2中的组件传值"><a href="#Vue2中的组件传值" class="headerlink" title="Vue2中的组件传值"></a>Vue2中的组件传值</h3><blockquote><p>父传子 $attrs</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">v-child</span> <span class="attr">msg</span>=<span class="string">&quot;hello&quot;</span> <span class="attr">school</span>=<span class="string">&quot;vue2父传子&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">v-child</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> vChild <span class="keyword">from</span> <span class="string">&quot;./theChild.vue&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">components</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        vChild</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>子组件</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is child<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">props</span>:[<span class="string">&quot;msg&quot;</span>],  <span class="comment">//子组件通过props接收</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">mounted</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);  <span class="comment">//打印this</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>当子组件通过 props 接收 父组件 传过来的值时， this上的**$attrs**啥都没；</p><p>当子组件通过 props 接收 父组件 传过来的值，但并没有全部接收， this上的**$attrs**有未接收的父组件传的值；</p><p>当子组件去掉 props，即不接收父组件 传过来的值时 this上的**$attrs**有父组件传过来的值；</p><p>结论：vue2中<code>vue实例</code>中的**$attrs**可以<code>捡漏</code>父组件传过来，但<code>props</code>未接收的数据；</p></blockquote><p><img src="https://img.fsllala.top/1656845866917v2fcz.png" alt="父传子Vue2"></p><h3 id="vue3中的组件传值"><a href="#vue3中的组件传值" class="headerlink" title="vue3中的组件传值"></a>vue3中的组件传值</h3><blockquote><p>父传子</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">v-child</span> <span class="attr">msg</span>=<span class="string">&quot;hello&quot;</span> <span class="attr">school</span>=<span class="string">&quot;父传子&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">v-child</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> vChild <span class="keyword">from</span> <span class="string">&quot;./theChild.vue&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">components</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        vChild,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>子组件 setup 的第一个参数</p><p>setup外和2一样，得先用props接收一下，然后setup的第一个参数就是接收的父亲传来的值；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is child<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">props</span>: [<span class="string">&quot;msg&quot;</span>, <span class="string">&quot;school&quot;</span>],</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params">props,context</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(props);  <span class="comment">//Proxy &#123;msg: &#x27;hello&#x27;, school: &#x27;父传子&#x27;&#125;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>子组件 setup 的第二个参数 context；</p><p>context.attrs与2中的this.$attts一样，是捡漏的,即props没接收到的 ，就去context.attrs里面了；</p></blockquote><figure class="highlight jsx"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">props</span>: [<span class="string">&quot;msg&quot;</span>],</span><br><span class="line">  <span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span><br><span class="line">  <span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span><br><span class="line">    <span class="comment">// console.log(context); //上下文   主要关注其 attrs , emit , slots属性</span></span><br><span class="line">    <span class="comment">//context.attrs 相当于vue2中的 this.$attrs  捡漏的...</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(context.<span class="property">attrs</span>);  <span class="comment">//Proxy &#123;school: &#x27;父传子&#x27;, __vInternal: 1&#125;</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><blockquote><p>子传父</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">v-child</span> <span class="attr">msg</span>=<span class="string">&quot;hello&quot;</span> <span class="attr">school</span>=<span class="string">&quot;父传子&quot;</span> @<span class="attr">lala</span>=<span class="string">&quot;fsl&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">v-child</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> vChild <span class="keyword">from</span> <span class="string">&quot;./theChild.vue&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">components</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        vChild,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> <span class="title function_">fsl</span>=(<span class="params">value</span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`接收到了子组件传来的<span class="subst">$&#123;value&#125;</span>`</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            fsl,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>context.emit与2中的this.$emits一样</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//子组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is child<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;childToPatent&quot;</span>&gt;</span>子传父<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">props</span>: [<span class="string">&quot;msg&quot;</span>,<span class="string">&quot;school&quot;</span>],</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// console.log(context); //上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> <span class="title function_">childToPatent</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        context.<span class="title function_">emit</span>(<span class="string">&quot;lala&quot;</span>,<span class="number">666</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        childToPatent,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656845934916v3fcz.png"></p><blockquote><p>但是这样还是不行滴，会出提示的，需要在子组件中用 <code>emits</code>解决</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//子组件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">props</span>: [<span class="string">&quot;msg&quot;</span>,<span class="string">&quot;school&quot;</span>],</span><br><span class="line">  <span class="attr">emits</span>:[<span class="string">&quot;lala&quot;</span>],</span><br><span class="line">  <span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span><br><span class="line">  <span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span><br><span class="line">    <span class="comment">// console.log(context); //上下文   主要关注其 attrs , emit , slots属性</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">childToPatent</span>=(<span class="params"></span>)=&gt;&#123;</span><br><span class="line">        context.<span class="title function_">emit</span>(<span class="string">&quot;lala&quot;</span>,<span class="number">666</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span>&#123;</span><br><span class="line">        childToPatent,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><blockquote><p>传递有名字的插槽需要用template包装起来，然后用  v-slot：xxx</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">v-child</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="comment">&lt;!-- 传递实名插槽 需要 v-slot:xxx --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:qwe</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>123<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:abc</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>123<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">v-child</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> vChild <span class="keyword">from</span> <span class="string">&quot;./theChild.vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    vChild,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>子组件</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>this is child<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第一个参数是接收父组件传来的值,形参,当然也不一定叫props；</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   第二个参数是上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// console.log(context); //上下文   主要关注其 attrs , emit , slots属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(context.<span class="property">slots</span>) <span class="comment">//Proxy &#123;_: 1, __vInternal: 1, qwe: ƒ, abc: ƒ&#125;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>]]></content>
       
       
       <categories>
@@ -608,7 +608,7 @@
       <link href="/articles/bb6c6e3.html"/>
       <url>/articles/bb6c6e3.html</url>
       
-        <content type="html"><![CDATA[<h2 id="vue2响应式原理"><a href="#vue2响应式原理" class="headerlink" title="vue2响应式原理"></a>vue2响应式原理</h2><blockquote><p>通过<code>Object.defineProperty()</code>对属性的读取，修改进行数据劫持；</p><p>get捕获 获取的数据；set捕获 修改的数据；但是添加和删除属性是捕获不到的；</p></blockquote><figure class="highlight jsx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 给哪个对象追加属性,追加什么属性,对象 get 和set方法</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperties</span>(p,<span class="string">&quot;name&quot;</span>,&#123;</span><br><span class="line"><span class="title function_">get</span>(<span class="params"></span>)&#123;&#125;,</span><br><span class="line"><span class="title function_">set</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 源数据</span></span><br><span class="line"><span class="keyword">let</span> person=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="number">20</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 模拟vue2实现响应式</span></span><br><span class="line"><span class="comment">// 1.准备一个空对象</span></span><br><span class="line"><span class="keyword">let</span> p = &#123;&#125;;</span><br><span class="line"><span class="comment">// 给哪个对象追加属性,追加什么属性,对象 get 和set方法</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(p,<span class="string">&quot;name&quot;</span>,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params"></span>)&#123;<span class="comment">//有人读取name时使用</span></span><br><span class="line">        <span class="keyword">return</span> person.<span class="property">name</span>;  <span class="comment">//将原数据返回</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">set</span>(<span class="params">value</span>)&#123;<span class="comment">//有人修改name时使用</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;有人修了了name属性&quot;</span>);</span><br><span class="line">        person.<span class="property">name</span>=value;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(p,<span class="string">&quot;age&quot;</span>,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params"></span>)&#123;<span class="comment">//有人读取name时使用</span></span><br><span class="line">        <span class="keyword">return</span> person.<span class="property">age</span>;  <span class="comment">//将原数据返回</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">set</span>(<span class="params">value</span>)&#123;<span class="comment">//有人修改name时使用</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;有人修了了age属性&quot;</span>);</span><br><span class="line">        person.<span class="property">age</span>=value;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p> <code>添加</code>和<code>删除</code>捕获不到；</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656844636919vue2yl.png" alt="vue2"></p><h2 id="vue2响应式出现的问题及解决方法"><a href="#vue2响应式出现的问题及解决方法" class="headerlink" title="vue2响应式出现的问题及解决方法"></a>vue2响应式出现的问题及解决方法</h2><h3 id="对象中，新增属性、删除属性、界面不会更新-数据会变-；"><a href="#对象中，新增属性、删除属性、界面不会更新-数据会变-；" class="headerlink" title="对象中，新增属性、删除属性、界面不会更新(数据会变)；"></a>对象中，新增属性、删除属性、界面不会更新(数据会变)；</h3><blockquote><p>问题复现</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; person.name &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-show</span>=<span class="string">&quot;person.age&quot;</span>&gt;</span>&#123;&#123; person.age &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-show</span>=<span class="string">&quot;person.sex&quot;</span>&gt;</span>&#123;&#123; person.sex &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addSex&quot;</span>&gt;</span>添加一个属性<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;delName&quot;</span>&gt;</span>删除一个属性<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">person</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">methods</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 添加属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">addSex</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">sex</span>);  <span class="comment">//undefined</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">sex</span> = <span class="string">&quot;女&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">sex</span>); <span class="comment">// 女</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 删除属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">delName</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">age</span>); <span class="comment">//18</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="keyword">delete</span> <span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">age</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">age</span>); <span class="comment">//undefined</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>点击添加属性的按钮；点击删除对象的按钮；</p><p>person对象中有值了，但是页面不渲染</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656844776918vue2yl2.png" alt="obj"></p><blockquote><p>解决方法：</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用 Vue.set的方式需要 从 vue中引入 Vue;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">person</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 添加属性</span></span><br><span class="line">    <span class="title function_">addSex</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="comment">// 对象三个参数,给谁加,加的属性,加的值；</span></span><br><span class="line">      <span class="comment">// this.$set(this.person,&quot;sex&quot;,&quot;女&quot;);   //方法一,this代表 Vue的实例;</span></span><br><span class="line">      <span class="title class_">Vue</span>.<span class="title function_">set</span>(<span class="variable language_">this</span>.<span class="property">person</span>,<span class="string">&quot;sex&quot;</span>,<span class="string">&quot;女&quot;</span>);       <span class="comment">//方法二,需要从 vue中引入 Vue</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 删除属性</span></span><br><span class="line">    <span class="title function_">delName</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="comment">// 对象两个参数,删除谁，删除啥属性；</span></span><br><span class="line">      <span class="comment">// this.$delete(this.person,&quot;name&quot;);    //方法一,this代表 Vue的实例;</span></span><br><span class="line">      <span class="title class_">Vue</span>.<span class="title function_">delete</span>(<span class="variable language_">this</span>.<span class="property">person</span>,<span class="string">&quot;age&quot;</span>);         <span class="comment">//方法二,需要从 vue中引入 Vue</span></span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="直接通过下标修改数组，界面不会自动更新"><a href="#直接通过下标修改数组，界面不会自动更新" class="headerlink" title="直接通过下标修改数组，界面不会自动更新"></a>直接通过下标修改数组，界面不会自动更新</h3><blockquote><p>问题复现</p><p>点击之后数组变了，页面不渲染</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; person.hobby &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeLove&quot;</span>&gt;</span>修改第一个爱好<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//使用 Vue.set 需要 从 vue中引入;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">person</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">hobby</span>:[<span class="string">&quot;学习&quot;</span>,<span class="string">&quot;干饭&quot;</span>]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">methods</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 通过下标修改数组</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">changeLove</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">hobby</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">hobby</span>[<span class="number">0</span>]=<span class="string">&quot;study&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">hobby</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656844845915vue2yl3.png" alt="arr"></p><blockquote><p>解决方法</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用 Vue.set 需要 从 vue中引入;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">person</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">        <span class="attr">hobby</span>:[<span class="string">&quot;学习&quot;</span>,<span class="string">&quot;干饭&quot;</span>]</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 通过下标修改数组</span></span><br><span class="line">    <span class="title function_">changeLove</span>(<span class="params"></span>)&#123;</span><br><span class="line">      <span class="comment">// 数组三个参数, 修改谁,修改的索引,改成啥;</span></span><br><span class="line">      <span class="comment">// this.$set(this.person.hobby,0,&quot;study&quot;);  //方法一,this代表 Vue的实例;</span></span><br><span class="line">      <span class="comment">// Vue.set(this.person.hobby,0,&quot;studing&quot;);  //方法二,需要从 vue中引入 Vue</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">hobby</span>.<span class="title function_">splice</span>(<span class="number">0</span>,<span class="number">1</span>,<span class="string">&quot;打游戏&quot;</span>);   <span class="comment">//方法三,开始的索引,删除几个,替换成谁;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h2 id="vue3响应式原理"><a href="#vue3响应式原理" class="headerlink" title="vue3响应式原理"></a>vue3响应式原理</h2><blockquote><p>vue3响应式解决了vue2中响应式出现的问题；</p><p>通过Proxy(代理)对源对象变化的属性进行拦截，通过Reflect(反射)对源对象的属性进行操作；</p><p>知识点：</p><p>window.Proxy–&gt;window内置的构造函数</p></blockquote><figure class="highlight jsx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 源数据</span></span><br><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line"><span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line"><span class="attr">age</span>: <span class="number">20</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 模拟vue3中的响应式  </span></span><br><span class="line"><span class="comment">// Proxy的作用是  用p映射person的操作 参数:映射的对象、空对象</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Proxy</span>(person,&#123;&#125;);</span><br></pre></td></tr></table></figure><blockquote><p>重写一下 Proxy</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 源数据</span></span><br><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">20</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 模拟vue3中的响应式  </span></span><br><span class="line"><span class="comment">// Proxy的作用是  用p映射person的操作 参数:映射的对象、对象get set</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Proxy</span>(person,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;某人读取了p上的属性&quot;</span>,target,propName);</span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * 这里有个小知识点: </span></span><br><span class="line"><span class="comment">         * 变量1.变量2 == 变量1[&quot;变量2&quot;] --&gt; 即.变量2 中的 变量2 其实已经不是变量了</span></span><br><span class="line"><span class="comment">         * 变量用[];字符串用点或者[&quot;&quot;]</span></span><br><span class="line"><span class="comment">         * */</span> </span><br><span class="line"></span><br><span class="line">        <span class="comment">// return target.propName;  // undefined</span></span><br><span class="line">         <span class="keyword">return</span> target[propName]; <span class="comment">//张三 </span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">set</span>(<span class="params">target,propName,value</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性, value是设置的数据</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`修改了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        target[propName]=value;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 新增了一个删除方法</span></span><br><span class="line">    <span class="title function_">deleteProperty</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`删除了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        <span class="comment">// delete target[propName];  //false ,因为需要返回值,没有返回值为 false;</span></span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">delete</span> target[propName];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><blockquote><p>通过重写，发现 操作 都可以捕获到</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656844921916vue3yl.png" alt="vue3"></p><blockquote><p>但 vue3的底层 并不是通过 通过 获取到 target[propName] 这种来修改的；这种有缺陷，而是下面的Reflect；</p><p>知识点： 获取对象的某个属性,除了 <code>obj.属性</code>之外还有下面这个新增的方法</p><p>window.Reflect()  ；反射对象</p><p>Reflect.get(反射的对象,key)；Reflect.set(反射的对象,key,value)；Reflect.deleteProperty(反射的对象,key)</p></blockquote><blockquote><p>传统的 出现相同属性会出错，封装时需要大量的try,,,catch；Reflect 不会出错；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">let</span> obj = &#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>&#125;;</span><br><span class="line"><span class="comment">//Object.defineProperty会报错,封装的话 得需要大量的 try,catch</span></span><br><span class="line"><span class="comment">// Object.defineProperty(obj,&#x27;c&#x27;,&#123;</span></span><br><span class="line"><span class="comment">//     get()&#123;</span></span><br><span class="line"><span class="comment">//         return 3;</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Object.defineProperty(obj,&#x27;c&#x27;,&#123;</span></span><br><span class="line"><span class="comment">//     get()&#123;</span></span><br><span class="line"><span class="comment">//         return 4;</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"><span class="comment">//会报错  代码不继续往下走了</span></span><br><span class="line"><span class="comment">// console.log(123)  //不会输出的</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Reflect.defineProperty不会报错,且有返回值</span></span><br><span class="line"><span class="keyword">const</span> x1 = <span class="title class_">Reflect</span>.<span class="title function_">defineProperty</span>(obj,<span class="string">&#x27;c&#x27;</span>,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">3</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> x2= <span class="title class_">Reflect</span>.<span class="title function_">defineProperty</span>(obj,<span class="string">&#x27;c&#x27;</span>,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">4</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// console.log(x1); //true</span></span><br><span class="line"><span class="comment">// console.log(x2); //false</span></span><br><span class="line"><span class="keyword">if</span>(x2)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;某某操作成了&quot;</span>)</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;某某操作失败了&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>将重写的代码稍加改动 (vue3响应式原理)</p><p>通过Proxy(代理)对源对象变化的属性进行拦截，通过Reflect(反射)对源对象的属性进行操作；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 源数据</span></span><br><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">20</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 模拟vue3中的响应式  </span></span><br><span class="line"><span class="comment">// Proxy的作用是  用p映射person的操作 参数:映射的对象、对象get set</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Proxy</span>(person,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;某人读取了p上的属性&quot;</span>,target,propName);</span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * 这里有个小知识点: </span></span><br><span class="line"><span class="comment">         * 变量1.变量2 == 变量1[&quot;变量2&quot;] --&gt; 即.变量2 中的 变量2 其实已经不是变量了</span></span><br><span class="line"><span class="comment">         * 变量用[];字符串用点或者[&quot;&quot;]</span></span><br><span class="line"><span class="comment">         * */</span> </span><br><span class="line"></span><br><span class="line">        <span class="comment">// return target.propName;  // undefined</span></span><br><span class="line">        <span class="comment">//  return target[propName]; //张三 </span></span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Reflect</span>.<span class="title function_">get</span>(target,propName);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">set</span>(<span class="params">target,propName,value</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性, value是设置的数据</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`修改了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        <span class="comment">// target[propName]=value;</span></span><br><span class="line">        <span class="title class_">Reflect</span>.<span class="title function_">set</span>(target,propName,value);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 新增了一个删除方法</span></span><br><span class="line">    <span class="title function_">deleteProperty</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`删除了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        <span class="comment">// delete target[propName];  //false ,因为需要返回值,没有返回值为 false;</span></span><br><span class="line">        <span class="comment">// return delete target[propName];</span></span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Reflect</span>.<span class="title function_">deleteProperty</span>(target,propName);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>]]></content>
+        <content type="html"><![CDATA[<h2 id="vue2响应式原理"><a href="#vue2响应式原理" class="headerlink" title="vue2响应式原理"></a>vue2响应式原理</h2><blockquote><p>通过<code>Object.defineProperty()</code>对属性的读取，修改进行数据劫持；</p><p>get捕获 获取的数据；set捕获 修改的数据；但是添加和删除属性是捕获不到的；</p></blockquote><figure class="highlight jsx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 给哪个对象追加属性,追加什么属性,对象 get 和set方法</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperties</span>(p,<span class="string">&quot;name&quot;</span>,&#123;</span><br><span class="line"><span class="title function_">get</span>(<span class="params"></span>)&#123;&#125;,</span><br><span class="line"><span class="title function_">set</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 源数据</span></span><br><span class="line"><span class="keyword">let</span> person=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="number">20</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 模拟vue2实现响应式</span></span><br><span class="line"><span class="comment">// 1.准备一个空对象</span></span><br><span class="line"><span class="keyword">let</span> p = &#123;&#125;;</span><br><span class="line"><span class="comment">// 给哪个对象追加属性,追加什么属性,对象 get 和set方法</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(p,<span class="string">&quot;name&quot;</span>,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params"></span>)&#123;<span class="comment">//有人读取name时使用</span></span><br><span class="line">        <span class="keyword">return</span> person.<span class="property">name</span>;  <span class="comment">//将原数据返回</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">set</span>(<span class="params">value</span>)&#123;<span class="comment">//有人修改name时使用</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;有人修了了name属性&quot;</span>);</span><br><span class="line">        person.<span class="property">name</span>=value;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(p,<span class="string">&quot;age&quot;</span>,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params"></span>)&#123;<span class="comment">//有人读取name时使用</span></span><br><span class="line">        <span class="keyword">return</span> person.<span class="property">age</span>;  <span class="comment">//将原数据返回</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">set</span>(<span class="params">value</span>)&#123;<span class="comment">//有人修改name时使用</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;有人修了了age属性&quot;</span>);</span><br><span class="line">        person.<span class="property">age</span>=value;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><blockquote><p> <code>添加</code>和<code>删除</code>捕获不到；</p></blockquote><p><img src="https://img.fsllala.top/1656844636919vue2yl.png" alt="vue2"></p><h2 id="vue2响应式出现的问题及解决方法"><a href="#vue2响应式出现的问题及解决方法" class="headerlink" title="vue2响应式出现的问题及解决方法"></a>vue2响应式出现的问题及解决方法</h2><h3 id="对象中，新增属性、删除属性、界面不会更新-数据会变-；"><a href="#对象中，新增属性、删除属性、界面不会更新-数据会变-；" class="headerlink" title="对象中，新增属性、删除属性、界面不会更新(数据会变)；"></a>对象中，新增属性、删除属性、界面不会更新(数据会变)；</h3><blockquote><p>问题复现</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; person.name &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-show</span>=<span class="string">&quot;person.age&quot;</span>&gt;</span>&#123;&#123; person.age &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-show</span>=<span class="string">&quot;person.sex&quot;</span>&gt;</span>&#123;&#123; person.sex &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addSex&quot;</span>&gt;</span>添加一个属性<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;delName&quot;</span>&gt;</span>删除一个属性<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">person</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">methods</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 添加属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">addSex</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">sex</span>);  <span class="comment">//undefined</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">sex</span> = <span class="string">&quot;女&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">sex</span>); <span class="comment">// 女</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 删除属性</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">delName</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">age</span>); <span class="comment">//18</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="keyword">delete</span> <span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">age</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">age</span>); <span class="comment">//undefined</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>点击添加属性的按钮；点击删除对象的按钮；</p><p>person对象中有值了，但是页面不渲染</p></blockquote><p><img src="https://img.fsllala.top/1656844776918vue2yl2.png" alt="obj"></p><blockquote><p>解决方法：</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用 Vue.set的方式需要 从 vue中引入 Vue;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">person</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 添加属性</span></span><br><span class="line">    <span class="title function_">addSex</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="comment">// 对象三个参数,给谁加,加的属性,加的值；</span></span><br><span class="line">      <span class="comment">// this.$set(this.person,&quot;sex&quot;,&quot;女&quot;);   //方法一,this代表 Vue的实例;</span></span><br><span class="line">      <span class="title class_">Vue</span>.<span class="title function_">set</span>(<span class="variable language_">this</span>.<span class="property">person</span>,<span class="string">&quot;sex&quot;</span>,<span class="string">&quot;女&quot;</span>);       <span class="comment">//方法二,需要从 vue中引入 Vue</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 删除属性</span></span><br><span class="line">    <span class="title function_">delName</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="comment">// 对象两个参数,删除谁，删除啥属性；</span></span><br><span class="line">      <span class="comment">// this.$delete(this.person,&quot;name&quot;);    //方法一,this代表 Vue的实例;</span></span><br><span class="line">      <span class="title class_">Vue</span>.<span class="title function_">delete</span>(<span class="variable language_">this</span>.<span class="property">person</span>,<span class="string">&quot;age&quot;</span>);         <span class="comment">//方法二,需要从 vue中引入 Vue</span></span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="直接通过下标修改数组，界面不会自动更新"><a href="#直接通过下标修改数组，界面不会自动更新" class="headerlink" title="直接通过下标修改数组，界面不会自动更新"></a>直接通过下标修改数组，界面不会自动更新</h3><blockquote><p>问题复现</p><p>点击之后数组变了，页面不渲染</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; person.hobby &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeLove&quot;</span>&gt;</span>修改第一个爱好<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//使用 Vue.set 需要 从 vue中引入;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">person</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">age</span>: <span class="number">18</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">hobby</span>:[<span class="string">&quot;学习&quot;</span>,<span class="string">&quot;干饭&quot;</span>]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">methods</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 通过下标修改数组</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">changeLove</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">hobby</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">hobby</span>[<span class="number">0</span>]=<span class="string">&quot;study&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">hobby</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656844845915vue2yl3.png" alt="arr"></p><blockquote><p>解决方法</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用 Vue.set 需要 从 vue中引入;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">person</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">        <span class="attr">hobby</span>:[<span class="string">&quot;学习&quot;</span>,<span class="string">&quot;干饭&quot;</span>]</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 通过下标修改数组</span></span><br><span class="line">    <span class="title function_">changeLove</span>(<span class="params"></span>)&#123;</span><br><span class="line">      <span class="comment">// 数组三个参数, 修改谁,修改的索引,改成啥;</span></span><br><span class="line">      <span class="comment">// this.$set(this.person.hobby,0,&quot;study&quot;);  //方法一,this代表 Vue的实例;</span></span><br><span class="line">      <span class="comment">// Vue.set(this.person.hobby,0,&quot;studing&quot;);  //方法二,需要从 vue中引入 Vue</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">hobby</span>.<span class="title function_">splice</span>(<span class="number">0</span>,<span class="number">1</span>,<span class="string">&quot;打游戏&quot;</span>);   <span class="comment">//方法三,开始的索引,删除几个,替换成谁;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h2 id="vue3响应式原理"><a href="#vue3响应式原理" class="headerlink" title="vue3响应式原理"></a>vue3响应式原理</h2><blockquote><p>vue3响应式解决了vue2中响应式出现的问题；</p><p>通过Proxy(代理)对源对象变化的属性进行拦截，通过Reflect(反射)对源对象的属性进行操作；</p><p>知识点：</p><p>window.Proxy–&gt;window内置的构造函数</p></blockquote><figure class="highlight jsx"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 源数据</span></span><br><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line"><span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line"><span class="attr">age</span>: <span class="number">20</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 模拟vue3中的响应式  </span></span><br><span class="line"><span class="comment">// Proxy的作用是  用p映射person的操作 参数:映射的对象、空对象</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Proxy</span>(person,&#123;&#125;);</span><br></pre></td></tr></table></figure><blockquote><p>重写一下 Proxy</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 源数据</span></span><br><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">20</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 模拟vue3中的响应式  </span></span><br><span class="line"><span class="comment">// Proxy的作用是  用p映射person的操作 参数:映射的对象、对象get set</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Proxy</span>(person,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;某人读取了p上的属性&quot;</span>,target,propName);</span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * 这里有个小知识点: </span></span><br><span class="line"><span class="comment">         * 变量1.变量2 == 变量1[&quot;变量2&quot;] --&gt; 即.变量2 中的 变量2 其实已经不是变量了</span></span><br><span class="line"><span class="comment">         * 变量用[];字符串用点或者[&quot;&quot;]</span></span><br><span class="line"><span class="comment">         * */</span> </span><br><span class="line"></span><br><span class="line">        <span class="comment">// return target.propName;  // undefined</span></span><br><span class="line">         <span class="keyword">return</span> target[propName]; <span class="comment">//张三 </span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">set</span>(<span class="params">target,propName,value</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性, value是设置的数据</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`修改了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        target[propName]=value;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 新增了一个删除方法</span></span><br><span class="line">    <span class="title function_">deleteProperty</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`删除了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        <span class="comment">// delete target[propName];  //false ,因为需要返回值,没有返回值为 false;</span></span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">delete</span> target[propName];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><blockquote><p>通过重写，发现 操作 都可以捕获到</p></blockquote><p><img src="https://img.fsllala.top/1656844921916vue3yl.png" alt="vue3"></p><blockquote><p>但 vue3的底层 并不是通过 通过 获取到 target[propName] 这种来修改的；这种有缺陷，而是下面的Reflect；</p><p>知识点： 获取对象的某个属性,除了 <code>obj.属性</code>之外还有下面这个新增的方法</p><p>window.Reflect()  ；反射对象</p><p>Reflect.get(反射的对象,key)；Reflect.set(反射的对象,key,value)；Reflect.deleteProperty(反射的对象,key)</p></blockquote><blockquote><p>传统的 出现相同属性会出错，封装时需要大量的try,,,catch；Reflect 不会出错；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">let</span> obj = &#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>&#125;;</span><br><span class="line"><span class="comment">//Object.defineProperty会报错,封装的话 得需要大量的 try,catch</span></span><br><span class="line"><span class="comment">// Object.defineProperty(obj,&#x27;c&#x27;,&#123;</span></span><br><span class="line"><span class="comment">//     get()&#123;</span></span><br><span class="line"><span class="comment">//         return 3;</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Object.defineProperty(obj,&#x27;c&#x27;,&#123;</span></span><br><span class="line"><span class="comment">//     get()&#123;</span></span><br><span class="line"><span class="comment">//         return 4;</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"><span class="comment">//会报错  代码不继续往下走了</span></span><br><span class="line"><span class="comment">// console.log(123)  //不会输出的</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Reflect.defineProperty不会报错,且有返回值</span></span><br><span class="line"><span class="keyword">const</span> x1 = <span class="title class_">Reflect</span>.<span class="title function_">defineProperty</span>(obj,<span class="string">&#x27;c&#x27;</span>,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">3</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> x2= <span class="title class_">Reflect</span>.<span class="title function_">defineProperty</span>(obj,<span class="string">&#x27;c&#x27;</span>,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">4</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// console.log(x1); //true</span></span><br><span class="line"><span class="comment">// console.log(x2); //false</span></span><br><span class="line"><span class="keyword">if</span>(x2)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;某某操作成了&quot;</span>)</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;某某操作失败了&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>将重写的代码稍加改动 (vue3响应式原理)</p><p>通过Proxy(代理)对源对象变化的属性进行拦截，通过Reflect(反射)对源对象的属性进行操作；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 源数据</span></span><br><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">20</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 模拟vue3中的响应式  </span></span><br><span class="line"><span class="comment">// Proxy的作用是  用p映射person的操作 参数:映射的对象、对象get set</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Proxy</span>(person,&#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;某人读取了p上的属性&quot;</span>,target,propName);</span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * 这里有个小知识点: </span></span><br><span class="line"><span class="comment">         * 变量1.变量2 == 变量1[&quot;变量2&quot;] --&gt; 即.变量2 中的 变量2 其实已经不是变量了</span></span><br><span class="line"><span class="comment">         * 变量用[];字符串用点或者[&quot;&quot;]</span></span><br><span class="line"><span class="comment">         * */</span> </span><br><span class="line"></span><br><span class="line">        <span class="comment">// return target.propName;  // undefined</span></span><br><span class="line">        <span class="comment">//  return target[propName]; //张三 </span></span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Reflect</span>.<span class="title function_">get</span>(target,propName);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">set</span>(<span class="params">target,propName,value</span>)&#123;</span><br><span class="line">        <span class="comment">// target为 源数据 , propName 为 获取的属性, value是设置的数据</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`修改了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        <span class="comment">// target[propName]=value;</span></span><br><span class="line">        <span class="title class_">Reflect</span>.<span class="title function_">set</span>(target,propName,value);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 新增了一个删除方法</span></span><br><span class="line">    <span class="title function_">deleteProperty</span>(<span class="params">target,propName</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`删除了p身上的<span class="subst">$&#123;propName&#125;</span>,我要去更新界面了`</span>);</span><br><span class="line">        <span class="comment">// delete target[propName];  //false ,因为需要返回值,没有返回值为 false;</span></span><br><span class="line">        <span class="comment">// return delete target[propName];</span></span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Reflect</span>.<span class="title function_">deleteProperty</span>(target,propName);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>]]></content>
       
       
       <categories>
@@ -635,7 +635,7 @@
       <link href="/articles/d61e2f28.html"/>
       <url>/articles/d61e2f28.html</url>
       
-        <content type="html"><![CDATA[<h2 id="ref函数"><a href="#ref函数" class="headerlink" title="ref函数"></a>ref函数</h2><blockquote><p>通过ref生成一个 <strong>引用对象(ref对象)</strong> ，定义一个<strong>响应式的数据</strong></p></blockquote><blockquote><p>传统写法：打印输出的值 是 <code>李四</code>，但是页面数据不变–&gt;数据不是响应式的–&gt;通过ref转为响应式</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> name = <span class="string">&quot;张三&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> age = <span class="number">20</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            name=<span class="string">&quot;李四&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(name);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            name,age,changeValue,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>ref转为响应式</p></blockquote><figure class="highlight jsx"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">let</span> name = <span class="title function_">ref</span>(<span class="string">&quot;张三&quot;</span>);</span><br><span class="line">        <span class="keyword">let</span> age = <span class="title function_">ref</span>(<span class="number">20</span>);</span><br><span class="line">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(name);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span>&#123;</span><br><span class="line">            name,age,changeValue,</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>先打印一下转化为响应式的name，是一个<code>引用对象</code></p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845486917ref.png" alt="ref"></p><blockquote><p>通过ref修改页面展示的数据</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> name = <span class="title function_">ref</span>(<span class="string">&quot;张三&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> age = <span class="title function_">ref</span>(<span class="number">20</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">// console.log(name);</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            name.<span class="property">value</span> = <span class="string">&quot;李四&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            age.<span class="property">value</span> = <span class="number">24</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            name,age,changeValue,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p><code>setup</code>中通过<code>.value</code>修改<code>ref响应式</code>的值；在<code>template</code>的<code>&#123;&#123;&#125;&#125;</code>中，不用<code>.value</code>，其自动带上了<code>.value</code></p><p>ref修改<code>引用数据类型</code> 则<code>template</code>中的<code>&#123;&#123;&#125;&#125;</code>需要 <code>对象.属性</code>；</p><p>同基本数据类型一样,要想获取到ref里面的响应式的值,需要通过 .value  获取；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 对象.属性 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.type&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.salary&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> job =<span class="title function_">ref</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">//同基本数据类型一样,要想获取到ref里面的响应式的值,需要通过 .value  获取</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(job.<span class="property">value</span>);  </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           changeValue,job</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845582916ref2.png" alt="ref引用数据类型"></p><blockquote><p>ref基本数据类型和引用数据类型</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845648916ref3.png" alt="ref"></p><blockquote><p>修改ref 引用数据类型的值</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">let</span> job =<span class="title function_">ref</span>(&#123;</span><br><span class="line">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span><br><span class="line">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span></span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span><br><span class="line">            <span class="comment">//同基本数据类型一样,要想获取到ref里面的响应式的值,需要通过 .value  获取</span></span><br><span class="line">            <span class="comment">// console.log(job.value);  </span></span><br><span class="line">            job.<span class="property">value</span>.<span class="property">type</span>=<span class="string">&quot;全栈开发&quot;</span>;</span><br><span class="line">            job.<span class="property">value</span>.<span class="property">salary</span>=<span class="string">&quot;60k&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span>&#123;</span><br><span class="line">           changeValue,job</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="reactive函数"><a href="#reactive函数" class="headerlink" title="reactive函数"></a>reactive函数</h2><blockquote><p>定义一个<strong>引用数据类型的响应式数据</strong>(基本数据类型不能用它，需要用ref)</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 对象.属性 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.type&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.salary&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;reactive&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> job =<span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(job); <span class="comment">//reactive不需要.value</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           job,changeValue</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845730916ref4.png" alt="reactive"></p><blockquote><p>修改 reactive 创建出来 的响应式 的数据(Proxy修复了2.x，数据更新了不渲染的问题，vue.$set…)</p><p>不需要.value</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;reactive&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">let</span> job =<span class="title function_">reactive</span>(&#123;</span><br><span class="line">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span><br><span class="line">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span>,</span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span><br><span class="line">            <span class="comment">// console.log(job);</span></span><br><span class="line">            job.<span class="property">type</span>=<span class="string">&quot;全栈开发&quot;</span>;</span><br><span class="line">            job.<span class="property">salary</span>=<span class="string">&quot;60k&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span>&#123;</span><br><span class="line">           job,changeValue</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>reactive定义的响应式对象是<code>深层次的</code>；</p><p>多层嵌套的数据，也可以直接改；(实测，ref也可以直接改，毕竟ref响应式底层用的也是reactive)</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 对象.属性 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.type&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.salary&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.a.b.c&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;reactive&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> job =<span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">a</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">b</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">c</span>:<span class="number">666</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">// console.log(job);</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            job.<span class="property">type</span>=<span class="string">&quot;全栈开发&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            job.<span class="property">salary</span>=<span class="string">&quot;60k&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            job.<span class="property">a</span>.<span class="property">b</span>.<span class="property">c</span>=<span class="number">999</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           job,changeValue</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h2 id="toRefs"><a href="#toRefs" class="headerlink" title="toRefs"></a>toRefs</h2><blockquote><p>创建多个ref对象</p><p>常用于对reactive对象进行解构</p></blockquote><figure class="highlight jsx"><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="keyword">import</span> &#123; reactive, toRefs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> job = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="string">&quot;前端工程师&quot;</span>,</span><br><span class="line">      <span class="attr">salary</span>: <span class="string">&quot;30k&quot;</span>,</span><br><span class="line">      <span class="attr">a</span>: &#123;</span><br><span class="line">        <span class="attr">b</span>: &#123;</span><br><span class="line">          <span class="attr">c</span>: <span class="number">666</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">let</span> jieGou = <span class="title function_">toRefs</span>(job);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(jieGou);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656845795916ref5.png" alt="toRefs"></p><blockquote><p>对Reactive对象进行解构</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 对象.属性 --&gt;</span><br><span class="line">  &lt;!-- 因为对象结构赋值了,所以这里少写了一层 job --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; type &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; salary &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; a.b.c &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; reactive, toRefs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> job = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">type</span>: <span class="string">&quot;前端工程师&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">salary</span>: <span class="string">&quot;30k&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">a</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">b</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">          <span class="attr">c</span>: <span class="number">666</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> <span class="title function_">changeValue</span> = (<span class="params"></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      job.<span class="property">type</span> = <span class="string">&quot;全栈开发&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      job.<span class="property">salary</span> = <span class="string">&quot;60k&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      job.<span class="property">a</span>.<span class="property">b</span>.<span class="property">c</span> = <span class="number">999</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123; </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">//在return 的 &#123;&#125; 里 对对象进行解构赋值;相当于添加了 toRef(job,&#x27;type&#x27;),toRef(job,&#x27;salary&#x27;),toRef(job,&#x27;a&#x27;) </span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      ...<span class="title function_">toRefs</span>(job), </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      changeValue,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>]]></content>
+        <content type="html"><![CDATA[<h2 id="ref函数"><a href="#ref函数" class="headerlink" title="ref函数"></a>ref函数</h2><blockquote><p>通过ref生成一个 <strong>引用对象(ref对象)</strong> ，定义一个<strong>响应式的数据</strong></p></blockquote><blockquote><p>传统写法：打印输出的值 是 <code>李四</code>，但是页面数据不变–&gt;数据不是响应式的–&gt;通过ref转为响应式</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> name = <span class="string">&quot;张三&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> age = <span class="number">20</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            name=<span class="string">&quot;李四&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(name);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            name,age,changeValue,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p>ref转为响应式</p></blockquote><figure class="highlight jsx"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">let</span> name = <span class="title function_">ref</span>(<span class="string">&quot;张三&quot;</span>);</span><br><span class="line">        <span class="keyword">let</span> age = <span class="title function_">ref</span>(<span class="number">20</span>);</span><br><span class="line">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(name);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span>&#123;</span><br><span class="line">            name,age,changeValue,</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>先打印一下转化为响应式的name，是一个<code>引用对象</code></p></blockquote><p><img src="https://img.fsllala.top/1656845486917ref.png" alt="ref"></p><blockquote><p>通过ref修改页面展示的数据</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> name = <span class="title function_">ref</span>(<span class="string">&quot;张三&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> age = <span class="title function_">ref</span>(<span class="number">20</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">// console.log(name);</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            name.<span class="property">value</span> = <span class="string">&quot;李四&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            age.<span class="property">value</span> = <span class="number">24</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            name,age,changeValue,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><blockquote><p><code>setup</code>中通过<code>.value</code>修改<code>ref响应式</code>的值；在<code>template</code>的<code>&#123;&#123;&#125;&#125;</code>中，不用<code>.value</code>，其自动带上了<code>.value</code></p><p>ref修改<code>引用数据类型</code> 则<code>template</code>中的<code>&#123;&#123;&#125;&#125;</code>需要 <code>对象.属性</code>；</p><p>同基本数据类型一样,要想获取到ref里面的响应式的值,需要通过 .value  获取；</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 对象.属性 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.type&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.salary&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> job =<span class="title function_">ref</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">//同基本数据类型一样,要想获取到ref里面的响应式的值,需要通过 .value  获取</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(job.<span class="property">value</span>);  </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           changeValue,job</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656845582916ref2.png" alt="ref引用数据类型"></p><blockquote><p>ref基本数据类型和引用数据类型</p></blockquote><p><img src="https://img.fsllala.top/1656845648916ref3.png" alt="ref"></p><blockquote><p>修改ref 引用数据类型的值</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">let</span> job =<span class="title function_">ref</span>(&#123;</span><br><span class="line">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span><br><span class="line">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span></span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span><br><span class="line">            <span class="comment">//同基本数据类型一样,要想获取到ref里面的响应式的值,需要通过 .value  获取</span></span><br><span class="line">            <span class="comment">// console.log(job.value);  </span></span><br><span class="line">            job.<span class="property">value</span>.<span class="property">type</span>=<span class="string">&quot;全栈开发&quot;</span>;</span><br><span class="line">            job.<span class="property">value</span>.<span class="property">salary</span>=<span class="string">&quot;60k&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span>&#123;</span><br><span class="line">           changeValue,job</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="reactive函数"><a href="#reactive函数" class="headerlink" title="reactive函数"></a>reactive函数</h2><blockquote><p>定义一个<strong>引用数据类型的响应式数据</strong>(基本数据类型不能用它，需要用ref)</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 对象.属性 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.type&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.salary&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;reactive&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> job =<span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(job); <span class="comment">//reactive不需要.value</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           job,changeValue</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656845730916ref4.png" alt="reactive"></p><blockquote><p>修改 reactive 创建出来 的响应式 的数据(Proxy修复了2.x，数据更新了不渲染的问题，vue.$set…)</p><p>不需要.value</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;reactive&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">let</span> job =<span class="title function_">reactive</span>(&#123;</span><br><span class="line">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span><br><span class="line">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span>,</span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span><br><span class="line">            <span class="comment">// console.log(job);</span></span><br><span class="line">            job.<span class="property">type</span>=<span class="string">&quot;全栈开发&quot;</span>;</span><br><span class="line">            job.<span class="property">salary</span>=<span class="string">&quot;60k&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span>&#123;</span><br><span class="line">           job,changeValue</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>reactive定义的响应式对象是<code>深层次的</code>；</p><p>多层嵌套的数据，也可以直接改；(实测，ref也可以直接改，毕竟ref响应式底层用的也是reactive)</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- 对象.属性 --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.type&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.salary&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;job.a.b.c&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;reactive&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> job =<span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;前端工程师&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">salary</span>:<span class="string">&quot;30k&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">a</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">b</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">c</span>:<span class="number">666</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> <span class="title function_">changeValue</span>=(<span class="params"></span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">// console.log(job);</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            job.<span class="property">type</span>=<span class="string">&quot;全栈开发&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            job.<span class="property">salary</span>=<span class="string">&quot;60k&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            job.<span class="property">a</span>.<span class="property">b</span>.<span class="property">c</span>=<span class="number">999</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           job,changeValue</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h2 id="toRefs"><a href="#toRefs" class="headerlink" title="toRefs"></a>toRefs</h2><blockquote><p>创建多个ref对象</p><p>常用于对reactive对象进行解构</p></blockquote><figure class="highlight jsx"><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="keyword">import</span> &#123; reactive, toRefs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> job = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="string">&quot;前端工程师&quot;</span>,</span><br><span class="line">      <span class="attr">salary</span>: <span class="string">&quot;30k&quot;</span>,</span><br><span class="line">      <span class="attr">a</span>: &#123;</span><br><span class="line">        <span class="attr">b</span>: &#123;</span><br><span class="line">          <span class="attr">c</span>: <span class="number">666</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">let</span> jieGou = <span class="title function_">toRefs</span>(job);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(jieGou);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656845795916ref5.png" alt="toRefs"></p><blockquote><p>对Reactive对象进行解构</p></blockquote><figure class="highlight jsx"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 对象.属性 --&gt;</span><br><span class="line">  &lt;!-- 因为对象结构赋值了,所以这里少写了一层 job --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; type &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; salary &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; a.b.c &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeValue&quot;</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; reactive, toRefs &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> job = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">type</span>: <span class="string">&quot;前端工程师&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">salary</span>: <span class="string">&quot;30k&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">a</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">b</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">          <span class="attr">c</span>: <span class="number">666</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> <span class="title function_">changeValue</span> = (<span class="params"></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      job.<span class="property">type</span> = <span class="string">&quot;全栈开发&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      job.<span class="property">salary</span> = <span class="string">&quot;60k&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      job.<span class="property">a</span>.<span class="property">b</span>.<span class="property">c</span> = <span class="number">999</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123; </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">//在return 的 &#123;&#125; 里 对对象进行解构赋值;相当于添加了 toRef(job,&#x27;type&#x27;),toRef(job,&#x27;salary&#x27;),toRef(job,&#x27;a&#x27;) </span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      ...<span class="title function_">toRefs</span>(job), </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      changeValue,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>]]></content>
       
       
       <categories>
@@ -687,7 +687,7 @@
       <link href="/articles/facd74f4.html"/>
       <url>/articles/facd74f4.html</url>
       
-        <content type="html"><![CDATA[<h1 id="Echarts"><a href="#Echarts" class="headerlink" title="Echarts"></a>Echarts</h1><p>一个基于 JavaScript 的开源可视化图表库。</p><h2 id="安装方式"><a href="#安装方式" class="headerlink" title="安装方式"></a>安装方式</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">npm init -y   <span class="comment">//初始化项目 </span></span><br><span class="line">npm install echarts --save  <span class="comment">//下载echarts</span></span><br><span class="line"><span class="comment">//ps:原生是不能用npm的;npm导入的得是带有打包工具的,比如webpack;</span></span><br><span class="line"><span class="comment">//原生可以在官网--&gt;入门篇--&gt;获取Echarts--&gt;从 CDN 获取--&gt;最上面的/dist/echarts.min.js--&gt;打开之后右键--&gt;另存为</span></span><br><span class="line">&lt;script src=<span class="string">&quot;./echarts.min.js&quot;</span>&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure><h2 id="快速上手"><a href="#快速上手" class="headerlink" title="快速上手"></a>快速上手</h2><p>参考echarts官网上的快速上手</p><ol><li>引入js文件</li><li>创建一个div来做dom容器；容器必须设置宽高，不然不会出来；</li><li>逻辑处理</li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width:500px;height:500px&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;./echarts.min.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 1.初始化echarts实例</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> myChart = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;box&#x27;</span>));</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// var myChart = echarts.init(document.getElementById(&#x27;box&#x27;),&quot;dark&quot;);  暗黑主题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 2.设置绘图的配置项和数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> userName=[<span class="string">&quot;李白&quot;</span>,<span class="string">&quot;阿离&quot;</span>,<span class="string">&quot;孙尚香&quot;</span>,<span class="string">&quot;虞姬&quot;</span>,<span class="string">&quot;马可&quot;</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> userScore = [<span class="number">100</span>,<span class="number">120</span>,<span class="number">99</span>,<span class="number">89</span>,<span class="number">55</span>,<span class="number">97</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> options =&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">//配置标题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">title</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">text</span>:<span class="string">&quot;学员成绩表鸭&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">//配置x轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">xAxis</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;category&quot;</span>, <span class="comment">//category(类目名称),value(数值)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">data</span>:userName   </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置y轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">yAxis</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;value&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置系列列表(这个是数组对象)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">series</span>:[&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;bar&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">data</span>:userScore</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 3.绘制图形</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    myChart.<span class="title function_">setOption</span>(options);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h2 id="series-配置系列列表"><a href="#series-配置系列列表" class="headerlink" title="series 配置系列列表"></a>series 配置系列列表</h2><p><code>echarts官网--&gt;文档--&gt;配置项手册</code>；其实大部分的图只是series差别比较大，别的几乎一样；</p><ul><li>是一个数组对象   每一个对象{}里面就是一系列数据，都有着自己的data，type…</li><li>label设置提示文本</li><li>itemStyle设置柱子的风格</li><li>markPoint与markLine 设置最大值，最小值与平均值</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//快速上手中,仅修改series配置列表,配置如下:</span></span><br><span class="line"><span class="comment">// 配置系列列表(这个是数组对象)</span></span><br><span class="line"><span class="attr">series</span>:[&#123;</span><br><span class="line">    <span class="attr">type</span>:<span class="string">&quot;bar&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>:userScore,</span><br><span class="line">    <span class="comment">//y轴的提示文本</span></span><br><span class="line">    <span class="attr">label</span>:&#123;</span><br><span class="line">        <span class="attr">show</span>:<span class="literal">true</span>,  <span class="comment">//y轴的数据会展示在每个轴的中心位置(默认位置)</span></span><br><span class="line">        <span class="attr">position</span>:<span class="string">&quot;top&quot;</span>,  <span class="comment">//y轴数据展示在顶部</span></span><br><span class="line">        <span class="attr">rotate</span>:<span class="number">40</span>, <span class="comment">//y轴数据 逆时针旋转40度, -40 就是顺时针旋转</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">barWidth</span>:<span class="number">20</span>, <span class="comment">//设置柱状的宽度</span></span><br><span class="line">    <span class="attr">itemStyle</span>:&#123; </span><br><span class="line">        <span class="attr">borderRadius</span>:[<span class="number">20</span>,<span class="number">20</span>,<span class="number">0</span>,<span class="number">0</span>],<span class="comment">//borderRadius (顺时针左上，右上，右下，左下)</span></span><br><span class="line">        <span class="comment">// color:&#x27;green&#x27;  //一种颜色</span></span><br><span class="line">        <span class="attr">color</span>: <span class="keyword">new</span> echarts.<span class="property">graphic</span>.<span class="title class_">LinearGradient</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">1</span>,[  <span class="comment">//渐变色</span></span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">offset</span>:<span class="number">0</span>,</span><br><span class="line">                <span class="attr">color</span>:<span class="string">&#x27;red&#x27;</span></span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">offset</span>:<span class="number">1</span>,</span><br><span class="line">                <span class="attr">color</span>:<span class="string">&#x27;orange&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        ])</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">markPoint</span>:&#123;  <span class="comment">//设置标记点 max min</span></span><br><span class="line">        <span class="attr">data</span>:[</span><br><span class="line">            &#123;<span class="attr">type</span>:<span class="string">&#x27;max&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;最大值&#x27;</span>&#125;,</span><br><span class="line">            &#123;<span class="attr">type</span>:<span class="string">&#x27;min&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;最小值&#x27;</span>&#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">markLine</span>:&#123;  <span class="comment">//设置标记线  average</span></span><br><span class="line">        <span class="attr">data</span>:[</span><br><span class="line">            &#123;<span class="attr">type</span>:<span class="string">&#x27;average&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;平均值&#x27;</span>&#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;]</span><br></pre></td></tr></table></figure><h2 id="grid-配置网络坐标系"><a href="#grid-配置网络坐标系" class="headerlink" title="grid 配置网络坐标系"></a>grid 配置网络坐标系</h2><p>用来调整坐标系的位置。</p><p><strong>Tip：top、bottom、left、right 在哪个里面都可以用的，用来调整位置；</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置网络坐标系</span></span><br><span class="line"><span class="attr">grid</span>:&#123;</span><br><span class="line">    <span class="attr">show</span>:<span class="literal">true</span>,  <span class="comment">//展示</span></span><br><span class="line">       <span class="attr">top</span>:<span class="string">&quot;30%&quot;</span>,  <span class="comment">//grid 组件离容器上侧的距离</span></span><br><span class="line">       <span class="attr">left</span>:<span class="string">&quot;30%&quot;</span>, <span class="comment">//grid 组件离容器左侧的距离</span></span><br><span class="line">       containLabel :<span class="literal">true</span>, <span class="comment">//grid 区域是否包含坐标轴的刻度标签</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h2 id="tooltip-配置提示语"><a href="#tooltip-配置提示语" class="headerlink" title="tooltip 配置提示语"></a>tooltip 配置提示语</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置提示语</span></span><br><span class="line"><span class="attr">tooltip</span>:&#123;</span><br><span class="line">   <span class="attr">show</span>:<span class="literal">true</span>,</span><br><span class="line">   <span class="attr">trigger</span>:<span class="string">&#x27;axis&#x27;</span>,  <span class="comment">//触发提示类型 item (默认) axis (中间有条细线)</span></span><br><span class="line">   <span class="attr">axisPointer</span>:&#123; <span class="comment">// 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果</span></span><br><span class="line">   <span class="attr">type</span>:<span class="string">&quot;shadow&quot;</span></span><br><span class="line">      &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h2 id="toolbox-工具栏"><a href="#toolbox-工具栏" class="headerlink" title="toolbox 工具栏"></a>toolbox 工具栏</h2><p>内置有<strong>导出图片</strong>，<strong>数据视图</strong>，<strong>动态类型切换</strong>，<strong>数据区域缩放</strong>，<strong>重置</strong>五个工具</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 工具箱</span></span><br><span class="line"><span class="attr">toolbox</span>: &#123;</span><br><span class="line">    <span class="attr">show</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">feature</span>: &#123; <span class="comment">//各工具配置项</span></span><br><span class="line">    <span class="attr">saveAsImage</span>: &#123;&#125;, <span class="comment">//保存图片</span></span><br><span class="line">    <span class="attr">restore</span>: &#123;&#125;, <span class="comment">//配置项还原</span></span><br><span class="line">    <span class="attr">dataView</span>: &#123;&#125;, <span class="comment">//编辑后可以动态更新</span></span><br><span class="line">    <span class="attr">dataZoom</span>: &#123;&#125;, <span class="comment">//数据区域缩放</span></span><br><span class="line">    <span class="attr">magicType</span>: &#123;  <span class="comment">//多种类型切换</span></span><br><span class="line">    <span class="attr">type</span>: [<span class="string">&#x27;line&#x27;</span>, <span class="string">&#x27;bar&#x27;</span>]</span><br><span class="line">    &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h2 id="legend-图例组件"><a href="#legend-图例组件" class="headerlink" title="legend 图例组件"></a>legend 图例组件</h2><p>图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置系列列表(这个是数组对象)</span></span><br><span class="line"><span class="attr">series</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;成绩&quot;</span>, <span class="comment">//必须有</span></span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;bar&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: userScore,</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;身高&quot;</span>,  <span class="comment">//必须有</span></span><br><span class="line">    <span class="attr">type</span>:<span class="string">&quot;bar&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>:userHeight</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 图例组件</span></span><br><span class="line"><span class="attr">legend</span>:&#123;</span><br><span class="line">    <span class="attr">show</span>:<span class="literal">true</span>,</span><br><span class="line">    <span class="attr">icon</span>:<span class="string">&quot;circle&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>大致效果图如下图所示：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656841820917echarts.png" alt="效果图"></p><p>以上内容都可以在<code>echarts官网--&gt;文档--&gt;配置项手册</code>中找到；</p><h2 id="Echarts事件"><a href="#Echarts事件" class="headerlink" title="Echarts事件"></a>Echarts事件</h2><p>以下内容都可以在<code>echarts官网--&gt;文档--&gt;API</code>中找到；</p><ul><li>监听用户的<strong>全部</strong>事件</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 4.监听用户的点击事件</span></span><br><span class="line"><span class="comment">//全部监听</span></span><br><span class="line">myChart.<span class="title function_">on</span>(<span class="string">&quot;click&quot;</span>,<span class="function">(<span class="params">msg</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(msg);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ul><li>监听用户的<strong>部分</strong>事件</li></ul><figure class="highlight js"><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"><span class="comment">// 筛选 &#123;seriesName:&quot;成绩&quot;&#125;的触发点击事件</span></span><br><span class="line">myChart.<span class="title function_">on</span>(<span class="string">&quot;click&quot;</span>,&#123;<span class="attr">seriesName</span>:<span class="string">&quot;成绩&quot;</span>&#125;,<span class="function">(<span class="params">msg</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(msg)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ul><li>移除监听事件</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 4.2 移除监听事件</span></span><br><span class="line">myChart.<span class="title function_">off</span>(<span class="string">&quot;click&quot;</span>);</span><br></pre></td></tr></table></figure><ul><li>添加<strong>加载中</strong>提示</li></ul><figure class="highlight js"><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"><span class="comment">// 1.初始化echarts实例</span></span><br><span class="line"><span class="keyword">var</span> myChart = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;box&#x27;</span>), <span class="string">&#x27;dark&#x27;</span>);</span><br><span class="line">myChart.<span class="title function_">showLoading</span>();  <span class="comment">//在初始化实例下添加 showLoading  API</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 2.绘制图形</span></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    myChart.<span class="title function_">setOption</span>(options);</span><br><span class="line">    myChart.<span class="title function_">hideLoading</span>();</span><br><span class="line">&#125;,<span class="number">1500</span>); <span class="comment">//设置定时器,让图形1500ms后加载,并隐藏加载提示</span></span><br></pre></td></tr></table></figure><ul><li>Echarts随窗口大小改变(若box固定宽高，则是改变不了的)</li></ul><figure class="highlight js"><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"><span class="comment">// 5.改变大小</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;resize&quot;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">  myChart.<span class="title function_">resize</span>();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="以上内容全部代码"><a href="#以上内容全部代码" class="headerlink" title="以上内容全部代码"></a>以上内容全部代码</h2><ul><li>css</li></ul><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100vw</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100vh</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>html</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li>js</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;./echarts.min.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 1.初始化echarts实例</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> myChart = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;box&#x27;</span>), <span class="string">&#x27;dark&#x27;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    myChart.<span class="title function_">showLoading</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// var myChart = echarts.init(document.getElementById(&#x27;box&#x27;),&quot;dark&quot;);  暗黑主题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 2.设置绘图的配置项和数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> userName = [<span class="string">&quot;李白&quot;</span>, <span class="string">&quot;阿离&quot;</span>, <span class="string">&quot;孙尚香&quot;</span>, <span class="string">&quot;虞姬&quot;</span>, <span class="string">&quot;马可&quot;</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> userScore = [<span class="number">100</span>, <span class="number">120</span>, <span class="number">99</span>, <span class="number">89</span>, <span class="number">55</span>, <span class="number">97</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> userHeight = [<span class="number">176</span>, <span class="number">163</span>, <span class="number">166</span>, <span class="number">178</span>, <span class="number">176</span>, <span class="number">187</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> options = &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">//配置标题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">title</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">text</span>: <span class="string">&quot;学员成绩表鸭&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>: <span class="string">&quot;3%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">left</span>: <span class="string">&quot;3%&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">//配置x轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">xAxis</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">name</span>: <span class="string">&quot;姓名&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>: <span class="string">&quot;category&quot;</span>, <span class="comment">//category(类目名称),value(数值)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">data</span>: userName</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置y轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">yAxis</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">name</span>: <span class="string">&quot;分数&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>: <span class="string">&quot;value&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 图例组件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">legend</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>: <span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">icon</span>: <span class="string">&quot;circle&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>: <span class="string">&quot;3%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 工具箱</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">toolbox</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>: <span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">feature</span>: &#123; <span class="comment">//各工具配置项</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">saveAsImage</span>: &#123;&#125;, <span class="comment">//保存图片</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">restore</span>: &#123;&#125;, <span class="comment">//配置项还原</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">dataView</span>: &#123;&#125;, <span class="comment">//编辑后可以动态更新</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">dataZoom</span>: &#123;&#125;, <span class="comment">//数据区域缩放</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">magicType</span>: &#123; <span class="comment">//多种类型切换</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">type</span>: [<span class="string">&#x27;line&#x27;</span>, <span class="string">&#x27;bar&#x27;</span>]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>: <span class="string">&quot;3%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">right</span>: <span class="string">&quot;3%&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置提示语</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">tooltip</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>: <span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">trigger</span>: <span class="string">&#x27;axis&#x27;</span>, <span class="comment">//触发提示类型 item (默认) axis (中间有条细线)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">axisPointer</span>: &#123; <span class="comment">// 触发动画效果(阴影,xy轴交叉坐标)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">type</span>: <span class="string">&quot;shadow&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置网络坐标系(用来调整坐标系的位置的)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">grid</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>: <span class="literal">true</span>, <span class="comment">//展示</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>: <span class="string">&quot;10%&quot;</span>, <span class="comment">//grid 组件离容器上侧的距离</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">left</span>: <span class="string">&quot;10%&quot;</span>, <span class="comment">//grid 组件离容器左侧的距离</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">containLabel</span>: <span class="literal">true</span>, <span class="comment">//grid 区域是否包含坐标轴的刻度标签</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置系列列表(这个是数组对象)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">series</span>: [&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">name</span>: <span class="string">&quot;成绩&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">type</span>: <span class="string">&quot;bar&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">data</span>: userScore,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="comment">//y轴的提示文本</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">label</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">show</span>: <span class="literal">true</span>, <span class="comment">//y轴的数据会展示在每个轴的中心位置(默认位置)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">position</span>: <span class="string">&quot;top&quot;</span>, <span class="comment">//y轴数据展示在顶部</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">rotate</span>: <span class="number">40</span>, <span class="comment">//y轴数据 逆时针旋转40度, -40 就是顺时针旋转</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="comment">// barWidth: 20, //设置柱状的宽度</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">itemStyle</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">borderRadius</span>: [<span class="number">20</span>, <span class="number">20</span>, <span class="number">0</span>, <span class="number">0</span>], <span class="comment">//(顺时针左上，右上，右下，左下)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="comment">// color:&#x27;green&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">color</span>: <span class="keyword">new</span> echarts.<span class="property">graphic</span>.<span class="title class_">LinearGradient</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">1</span>, [&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">offset</span>: <span class="number">0</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">offset</span>: <span class="number">1</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">color</span>: <span class="string">&#x27;orange&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    ])</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">markPoint</span>: &#123; <span class="comment">//设置标记点 max min</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">data</span>: [&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">type</span>: <span class="string">&#x27;max&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">name</span>: <span class="string">&#x27;最大值&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">type</span>: <span class="string">&#x27;min&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">name</span>: <span class="string">&#x27;最小值&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    ]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">markLine</span>: &#123; <span class="comment">//设置标记线  average</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">data</span>: [&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="attr">type</span>: <span class="string">&#x27;average&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="attr">name</span>: <span class="string">&#x27;平均值&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">name</span>: <span class="string">&quot;身高&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">type</span>: <span class="string">&quot;bar&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">data</span>: userHeight</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        ]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 3.绘制图形</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        myChart.<span class="title function_">setOption</span>(options);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        myChart.<span class="title function_">hideLoading</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;, <span class="number">500</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 4.监听用户的点击事件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//全部监听</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// myChart.on(&quot;click&quot;, (msg) =&gt; &#123;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//     console.log(msg);</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// &#125;)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 筛选 &#123;seriesName:&quot;成绩&quot;&#125;的触发点击事件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    myChart.<span class="title function_">on</span>(<span class="string">&quot;click&quot;</span>, &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">seriesName</span>: <span class="string">&quot;成绩&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;, <span class="function">(<span class="params">msg</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="variable language_">console</span>.<span class="title function_">log</span>(msg)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 4.2 移除监听事件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    myChart.<span class="title function_">off</span>(<span class="string">&quot;click&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 5.改变大小</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;resize&quot;</span>, <span class="function">() =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        myChart.<span class="title function_">resize</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h2 id="散点（气泡）图"><a href="#散点（气泡）图" class="headerlink" title="散点（气泡）图"></a>散点（气泡）图</h2><p>身高体重根据bmi，超重的大一点，为红色；不超重的小一点，为绿色；</p><ul><li>css</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">*&#123;</span><br><span class="line"><span class="attr">padding</span>: <span class="number">0</span>;</span><br><span class="line"><span class="attr">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line">#box&#123;</span><br><span class="line">    <span class="attr">width</span>: 100vw;</span><br><span class="line">    <span class="attr">height</span>: 100vh;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>html</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li>js</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;./echarts.min.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 1.初始化Echarts实例</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> myChart = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;box&quot;</span>),<span class="string">&#x27;dark&#x27;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 2.设置绘图的数据和配置项</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 模拟数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> arrs = [&#123;<span class="attr">height</span>:<span class="number">172</span>,<span class="attr">weight</span>:<span class="number">172</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">168</span>,<span class="attr">weight</span>:<span class="number">152</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">156</span>,<span class="attr">weight</span>:<span class="number">152</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">166</span>,<span class="attr">weight</span>:<span class="number">112</span>&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    ,&#123;<span class="attr">height</span>:<span class="number">155</span>,<span class="attr">weight</span>:<span class="number">132</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">148</span>,<span class="attr">weight</span>:<span class="number">113</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">172</span>,<span class="attr">weight</span>:<span class="number">162</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">171</span>,<span class="attr">weight</span>:<span class="number">132</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">173</span>,<span class="attr">weight</span>:<span class="number">132</span>&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    ];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//通过官网的示例可得知为 [[x,y],[x,y],[x,y]] 格式的数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> allData = arrs.<span class="title function_">map</span>(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span> [item.<span class="property">height</span>,item.<span class="property">weight</span>]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> options=&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置标题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">title</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">text</span>:<span class="string">&quot;身高体重图&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">textStyle</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">color</span>:<span class="string">&quot;orange&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>:<span class="string">&quot;5%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">left</span>:<span class="string">&quot;5%&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置X轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">xAxis</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">name</span>:<span class="string">&quot;身高&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>:<span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;value&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">scale</span>:<span class="literal">true</span>,   <span class="comment">//坐标不会强制包含0刻度,只在数值轴中（type: &#x27;value&#x27;）有效</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置y轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">yAxis</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">name</span>:<span class="string">&quot;体重&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>:<span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;value&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">scale</span>:<span class="literal">true</span>,  <span class="comment">//坐标不会强制包含0刻度,只在数值轴中（type: &#x27;value&#x27;）有效</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置网格坐标系</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">grid</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>:<span class="literal">false</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>:<span class="string">&quot;15%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">left</span>:<span class="string">&quot;10%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">containLabel</span>:<span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">//配置系列</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">series</span>:[</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">type</span>: <span class="string">&#x27;effectScatter&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">data</span>:allData,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">showEffectOn</span>:<span class="string">&#x27;emphasis&#x27;</span>,  <span class="comment">//配置何时显示特效  emphasis 鼠标移入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">rippleEffect</span>:&#123;  <span class="comment">//设置波纹</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">scale</span>:<span class="number">5</span>   <span class="comment">//波纹大小</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="comment">// 设置标记的大小</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">symbolSize</span>:<span class="keyword">function</span>(<span class="params">info</span>)&#123;   <span class="comment">//因为有条件来区分,所以使用的函数</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="comment">// console.log(info)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="comment">// bmi = 体重kg/(身高m*身高m)  大于28,代表肥胖</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">let</span> bmi = info[<span class="number">1</span>]/<span class="number">2</span>/(info[<span class="number">0</span>]/<span class="number">100</span>*info[<span class="number">0</span>]/<span class="number">100</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">if</span>(bmi&gt;<span class="number">28</span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="number">12</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;<span class="keyword">else</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="number">8</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="comment">//设置标记的颜色</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">itemStyle</span>:&#123; </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">color</span>:<span class="keyword">function</span>(<span class="params">datas</span>)&#123;   <span class="comment">//因为有条件来区分,所以使用的函数</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="comment">// console.log(info)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">let</span> newDatas = datas.<span class="property">value</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">let</span> bmi = newDatas[<span class="number">1</span>]/<span class="number">2</span>/(newDatas[<span class="number">0</span>]/<span class="number">100</span>*newDatas[<span class="number">0</span>]/<span class="number">100</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">if</span>(bmi&gt;<span class="number">28</span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="string">&quot;red&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;<span class="keyword">else</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="string">&quot;green&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        ]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 3.展示</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    myChart.<span class="title function_">setOption</span>(options);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p>大致效果图如下图所示：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656841907919echarts2.png" alt="图例"></p><h1 id="在vue中使用Echarts"><a href="#在vue中使用Echarts" class="headerlink" title="在vue中使用Echarts"></a>在vue中使用Echarts</h1><h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><ol><li>下载：<code>npm install echarts</code></li><li>在<code>main.js</code>入口文件里引入</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> echarts <span class="keyword">from</span> <span class="string">&quot;echarts&quot;</span>;</span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$echarts</span> = echarts; <span class="comment">//挂载到原型上</span></span><br></pre></td></tr></table></figure><ol start="3"><li>使用</li></ol><figure class="highlight js"><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"><span class="variable language_">this</span>.<span class="property">myChart</span> = <span class="variable language_">this</span>.<span class="property">$echarts</span>.<span class="title function_">init</span>(</span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;xxx&quot;</span>)</span><br><span class="line">   );</span><br></pre></td></tr></table></figure><h2 id="获取Echarts的base64地址"><a href="#获取Echarts的base64地址" class="headerlink" title="获取Echarts的base64地址"></a>获取Echarts的base64地址</h2><blockquote><p>通过官网的<code>getDataURL</code>来获取绘制图像的地址</p></blockquote><p>注意事项：如果在mounted 时候就要获取base64地址会出现如下情况：</p><ul><li>执行getDataURL之前，ECharts的option必须设置好，否则图片出现空白(只有坐标系,没有数据)</li></ul><blockquote><p>把getDataURL这个方法理解成为是一个相机，而你的 展示的图表是一个人在摆姿态。也就是  当照相机  按下快门的一瞬间，你这个人  姿态还没有摆好就已经被拍照了  那么自然 洗出来的 图片就没有效果了</p></blockquote><p>期望的：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsExport.png" alt="期望的"></p><p>通过base64地址,在新的tab页展现的：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsBase64.png" alt="实际上"></p><p>解决方法</p><ul><li>延迟 相机的 拍照时间</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">myChart</span>.<span class="title function_">setOption</span>(option);</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">echartsBase64</span> = <span class="variable language_">this</span>.<span class="property">myChart</span>.<span class="title function_">getDataURL</span>(&#123;</span><br><span class="line">        <span class="attr">backgroundColor</span>: <span class="string">&quot;#fff&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">echartsBase64</span>);</span><br><span class="line">&#125;, <span class="number">1000</span>);</span><br></pre></td></tr></table></figure><ul><li>取消 图表里面动画效果，就是在 option 中添加一个  animation: false 属性 就可以解决这个问题</li></ul><blockquote><p>我们这次是通过点击按钮获取base64地址，所以不会出现此上提及的问题；但是点击的时候需要通过Echarts的getDataURL来获取地址，所以我将Echarts存到了data里面</p></blockquote><figure class="highlight plaintext"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div id=&quot;meetingRoomTrend&quot; style=&quot;width: 500px; height: 500px&quot;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;button @click=&quot;getBase64&quot;&gt;获取EchartsBase64&lt;/button&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;exportEcharts&quot;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      myChart: &quot;&quot;,</span><br><span class="line">      echartsBase64: &quot;&quot;,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    meetingChart() &#123;</span><br><span class="line">      this.myChart = this.$echarts.init(</span><br><span class="line">        document.getElementById(&quot;meetingRoomTrend&quot;)</span><br><span class="line">      );</span><br><span class="line">      //配置图表</span><br><span class="line">      var option = &#123;</span><br><span class="line">        // animation: false,</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          trigger: &quot;axis&quot;,</span><br><span class="line">          axisPointer: &#123;</span><br><span class="line">            type: &quot;shadow&quot;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        legend: &#123;</span><br><span class="line">          show: false,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 工具箱</span><br><span class="line">        toolbox: &#123;</span><br><span class="line">          show: true,</span><br><span class="line">          feature: &#123;</span><br><span class="line">            //各工具配置项</span><br><span class="line">            saveAsImage: &#123; show: true &#125;, //保存图片</span><br><span class="line">            restore: &#123;&#125;, //配置项还原</span><br><span class="line">            dataView: &#123;&#125;, //编辑后可以动态更新</span><br><span class="line">            dataZoom: &#123;&#125;, //数据区域缩放</span><br><span class="line">            magicType: &#123;</span><br><span class="line">              //多种类型切换</span><br><span class="line">              type: [&quot;line&quot;, &quot;bar&quot;],</span><br><span class="line">            &#125;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        grid: &#123;</span><br><span class="line">          left: &quot;3%&quot;,</span><br><span class="line">          right: &quot;4%&quot;,</span><br><span class="line">          bottom: &quot;3%&quot;,</span><br><span class="line">          containLabel: true,</span><br><span class="line">        &#125;,</span><br><span class="line">        xAxis: &#123;</span><br><span class="line">          type: &quot;value&quot;,</span><br><span class="line">          boundaryGap: [0, 0.01],</span><br><span class="line">        &#125;,</span><br><span class="line">        yAxis: &#123;</span><br><span class="line">          type: &quot;category&quot;,</span><br><span class="line">          data: [&quot;会议室01&quot;, &quot;会议室02&quot;, &quot;会议室03&quot;, &quot;会议室04&quot;, &quot;会议室05&quot;],</span><br><span class="line">        &#125;,</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            name: &quot;2012&quot;,</span><br><span class="line">            type: &quot;bar&quot;,</span><br><span class="line">            data: [16, 50, 30, 25, 36],</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line">      this.myChart.setOption(option);</span><br><span class="line">      // setTimeout(() =&gt; &#123;</span><br><span class="line">      //   this.echartsBase64 = this.myChart.getDataURL(&#123;</span><br><span class="line">      //     backgroundColor: &quot;#fff&quot;,</span><br><span class="line">      //   &#125;);</span><br><span class="line">      //   console.log(this.echartsBase64);</span><br><span class="line">      // &#125;, 1000);</span><br><span class="line">    &#125;,</span><br><span class="line">    getBase64() &#123;</span><br><span class="line">      this.echartsBase64 = this.myChart.getDataURL(&#123; backgroundColor: &quot;#fff&quot; &#125;);</span><br><span class="line">      console.log(this.echartsBase64);</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    this.meetingChart();</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><h2 id="通过select切换Echarts图（不改变数据，只切换图形）"><a href="#通过select切换Echarts图（不改变数据，只切换图形）" class="headerlink" title="通过select切换Echarts图（不改变数据，只切换图形）"></a>通过select切换Echarts图（不改变数据，只切换图形）</h2><p>我这里用到了两种方法：</p><ul><li>通过修改series里面的type，即给series里面的type为一个变量,通过修改这个变量为bar，line，pie等来切换图形；</li><li>重新设置options，echarts所有的配置项都在options,改变这个就相当于改变了echarts；同上面的方法相比，上面的缺点是切换为饼状图还会有坐标轴，不妥；此方法的缺点是，代码重复的多，好多个options；</li></ul><blockquote><p>以上方法都有个坑：</p><p>控制台会提示：There is a chart instance already initialized on the dom.</p><p>虽然不影响切换效果，但是总感觉不好</p></blockquote><p>坑的解决方法：</p><ul><li>每次绘制echart前，要dispose()销毁实例一下，否则图会重叠在一起；</li></ul><h3 id="方案一效果："><a href="#方案一效果：" class="headerlink" title="方案一效果："></a>方案一效果：</h3><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsChange1.gif" alt="方案一"></p><h3 id="方法一代码："><a href="#方法一代码：" class="headerlink" title="方法一代码："></a>方法一代码：</h3><figure class="highlight plaintext"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;el-select v-model=&quot;echartsType&quot; @change=&quot;changeEcharts&quot;&gt;</span><br><span class="line">        &lt;el-option</span><br><span class="line">          v-for=&quot;(item, index) in optVal&quot;</span><br><span class="line">          :label=&quot;item.lable&quot;</span><br><span class="line">          :value=&quot;item.value&quot;</span><br><span class="line">          :key=&quot;index&quot;</span><br><span class="line">        &gt;&lt;/el-option&gt;</span><br><span class="line">      &lt;/el-select&gt;</span><br><span class="line">      &lt;div id=&quot;meetingRoomTrend&quot; style=&quot;width: 500px; height: 500px&quot;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;changeEcharts&quot;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      echartsType: &quot;bar&quot;,</span><br><span class="line">      optVal: [</span><br><span class="line">        &#123; lable: &quot;柱状图&quot;, value: &quot;bar&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;折线图&quot;, value: &quot;line&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;饼状图&quot;, value: &quot;pie&quot; &#125;,</span><br><span class="line">      ],</span><br><span class="line">      myChart: &quot;&quot;,</span><br><span class="line">      userName: [&quot;李白&quot;, &quot;阿离&quot;, &quot;孙尚香&quot;, &quot;虞姬&quot;, &quot;马可&quot;],</span><br><span class="line">      userScore: [100, 120, 99, 89, 55, 97],</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    // 通过修改series里面的type,然后将原来的echarts dispose()与重新init来实现的;此方法可用于bar和line两种的切换;加上pie,因为series不同(pie没有横坐标啥的),所以不建议此方法;</span><br><span class="line">    getCharts() &#123;</span><br><span class="line">      this.myChart = this.$echarts.init(</span><br><span class="line">        document.getElementById(&quot;meetingRoomTrend&quot;)</span><br><span class="line">      );</span><br><span class="line">      //   this.myChart.showLoading();</span><br><span class="line">      var options = &#123;</span><br><span class="line">        //配置标题</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;学员成绩表鸭&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        //配置x轴</span><br><span class="line">        xAxis: &#123;</span><br><span class="line">          type: &quot;category&quot;, //category(类目名称),value(数值)</span><br><span class="line">          data: this.userName,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置提示语</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          show: true,</span><br><span class="line">          trigger: &quot;axis&quot;, //触发提示类型 item (默认) axis (中间有条细线)</span><br><span class="line">          axisPointer: &#123;</span><br><span class="line">            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果</span><br><span class="line">            type: &quot;shadow&quot;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置y轴</span><br><span class="line">        yAxis: &#123;</span><br><span class="line">          type: &quot;value&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置系列列表(这个是数组对象)</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            type: this.echartsType,</span><br><span class="line">            data: this.userScore,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      this.myChart.setOption(options);</span><br><span class="line">    &#125;,</span><br><span class="line">    changeEcharts() &#123;</span><br><span class="line">      /**</span><br><span class="line">       * clear类似于v-show</span><br><span class="line">       * dispose类似于v-if</span><br><span class="line">       */</span><br><span class="line">      if (![null, &quot;&quot;, undefined].includes(this.myChart)) &#123;</span><br><span class="line">        // this.myChart.dispose(); //解决echarts dom已经加载的报错</span><br><span class="line">        // this.myChart.clear();</span><br><span class="line">      &#125;</span><br><span class="line">      this.getCharts();</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    this.getCharts();</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><h3 id="方案二效果："><a href="#方案二效果：" class="headerlink" title="方案二效果："></a>方案二效果：</h3><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsChange2.gif" alt="方案二"></p><h3 id="方法二代码："><a href="#方法二代码：" class="headerlink" title="方法二代码："></a>方法二代码：</h3><figure class="highlight plaintext"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;el-select v-model=&quot;echartsType&quot; @change=&quot;changeEcharts&quot;&gt;</span><br><span class="line">        &lt;el-option</span><br><span class="line">          v-for=&quot;(item, index) in optVal&quot;</span><br><span class="line">          :label=&quot;item.lable&quot;</span><br><span class="line">          :value=&quot;item.value&quot;</span><br><span class="line">          :key=&quot;index&quot;</span><br><span class="line">        &gt;&lt;/el-option&gt;</span><br><span class="line">      &lt;/el-select&gt;</span><br><span class="line">      &lt;div id=&quot;meetingRoomTrend&quot; style=&quot;width: 500px; height: 500px&quot;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;changeEcharts&quot;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      echartsType: &quot;bar&quot;,</span><br><span class="line">      optVal: [</span><br><span class="line">        &#123; lable: &quot;柱状图&quot;, value: &quot;bar&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;折线图&quot;, value: &quot;line&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;饼状图&quot;, value: &quot;pie&quot; &#125;,</span><br><span class="line">      ],</span><br><span class="line">      myChart: &quot;&quot;,</span><br><span class="line">      optionsBar: &quot;&quot;,</span><br><span class="line">      optionsLine: &quot;&quot;,</span><br><span class="line">      optionsPie: &quot;&quot;,</span><br><span class="line">      userName: [&quot;李白&quot;, &quot;阿离&quot;, &quot;孙尚香&quot;, &quot;虞姬&quot;, &quot;马可&quot;],</span><br><span class="line">      userScore: [100, 120, 99, 89, 55, 97],</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    // echarts所有的配置项都在options,改变这个就相当于改变了echarts;</span><br><span class="line">    getCharts() &#123;</span><br><span class="line">      this.myChart = this.$echarts.init(</span><br><span class="line">        document.getElementById(&quot;meetingRoomTrend&quot;)</span><br><span class="line">      );</span><br><span class="line">      this.optionsBar = &#123;</span><br><span class="line">        //配置标题</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;学员成绩表鸭&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        //配置x轴</span><br><span class="line">        xAxis: &#123;</span><br><span class="line">          type: &quot;category&quot;, //category(类目名称),value(数值)</span><br><span class="line">          data: this.userName,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置提示语</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          show: true,</span><br><span class="line">          trigger: &quot;axis&quot;, //触发提示类型 item (默认) axis (中间有条细线)</span><br><span class="line">          axisPointer: &#123;</span><br><span class="line">            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果</span><br><span class="line">            type: &quot;shadow&quot;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置y轴</span><br><span class="line">        yAxis: &#123;</span><br><span class="line">          type: &quot;value&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置系列列表(这个是数组对象)</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            type: &quot;bar&quot;,</span><br><span class="line">            data: this.userScore,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line">      this.optionsLine = &#123;</span><br><span class="line">        //配置标题</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;学员成绩表鸭&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        //配置x轴</span><br><span class="line">        xAxis: &#123;</span><br><span class="line">          type: &quot;category&quot;, //category(类目名称),value(数值)</span><br><span class="line">          data: this.userName,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置提示语</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          show: true,</span><br><span class="line">          trigger: &quot;axis&quot;, //触发提示类型 item (默认) axis (中间有条细线)</span><br><span class="line">          axisPointer: &#123;</span><br><span class="line">            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果</span><br><span class="line">            type: &quot;shadow&quot;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置y轴</span><br><span class="line">        yAxis: &#123;</span><br><span class="line">          type: &quot;value&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置系列列表(这个是数组对象)</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            type: &quot;line&quot;,</span><br><span class="line">            data: this.userScore,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line">      this.optionsPie = &#123;</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;Referer of a Website&quot;,</span><br><span class="line">          subtext: &quot;Fake Data&quot;,</span><br><span class="line">          left: &quot;center&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          trigger: &quot;item&quot;,</span><br><span class="line">          // confine: true,</span><br><span class="line">          // formatter: &quot;&#123;a&#125; &lt;br/&gt;&#123;b&#125; : &#123;c&#125; (&#123;d&#125;%)&quot;,</span><br><span class="line">         </span><br><span class="line">        &#125;,</span><br><span class="line">        legend: &#123;</span><br><span class="line">          orient: &quot;vertical&quot;,</span><br><span class="line">          left: &quot;left&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            name: &quot;Access From&quot;,</span><br><span class="line">            type: &quot;pie&quot;,</span><br><span class="line">            radius: &quot;50%&quot;,</span><br><span class="line">            data: [</span><br><span class="line">              &#123; value: 1048, name: &quot;Search Engine&quot; &#125;,</span><br><span class="line">              &#123; value: 735, name: &quot;Direct&quot; &#125;,</span><br><span class="line">              &#123; value: 580, name: &quot;Email&quot; &#125;,</span><br><span class="line">              &#123; value: 484, name: &quot;Union Ads&quot; &#125;,</span><br><span class="line">              &#123; value: 300, name: &quot;Video Ads&quot; &#125;,</span><br><span class="line">            ],</span><br><span class="line">            emphasis: &#123;</span><br><span class="line">              itemStyle: &#123;</span><br><span class="line">                shadowBlur: 10,</span><br><span class="line">                shadowOffsetX: 0,</span><br><span class="line">                shadowColor: &quot;rgba(0, 0, 0, 0.5)&quot;,</span><br><span class="line">              &#125;,</span><br><span class="line">            &#125;,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      // this.myChart.setOption(options);</span><br><span class="line">    &#125;,</span><br><span class="line">    changeEcharts() &#123;</span><br><span class="line">      /**</span><br><span class="line">       * clear类似于v-show</span><br><span class="line">       * dispose类似于v-if</span><br><span class="line">       */</span><br><span class="line">      if (![null, &quot;&quot;, undefined].includes(this.myChart)) &#123;</span><br><span class="line">        this.myChart.dispose(); ////解决echarts dom已经加载的报错</span><br><span class="line">        // this.myChart.clear();</span><br><span class="line">      &#125;</span><br><span class="line">      if (this.echartsType == &quot;bar&quot;) &#123;</span><br><span class="line">        this.getCharts();</span><br><span class="line">        this.myChart.setOption(this.optionsBar);</span><br><span class="line">      &#125; else if (this.echartsType == &quot;line&quot;) &#123;</span><br><span class="line">        this.getCharts();</span><br><span class="line">        this.myChart.setOption(this.optionsLine);</span><br><span class="line">      &#125; else if (this.echartsType == &quot;pie&quot;) &#123;</span><br><span class="line">        this.getCharts();</span><br><span class="line">        this.myChart.setOption(this.optionsPie);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    this.getCharts();</span><br><span class="line">    this.myChart.setOption(this.optionsBar);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><h2 id="如何自定义tooltip-formatter"><a href="#如何自定义tooltip-formatter" class="headerlink" title="如何自定义tooltip formatter"></a>如何自定义tooltip formatter</h2><blockquote><p>方式有很多，我更趋向回调函数的方式，因为简单明了；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">tooltip</span>: &#123;</span><br><span class="line">        <span class="attr">formatter</span>:<span class="keyword">function</span>(<span class="params">params</span>)&#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(params);</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;要展示的&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>通过上面切换Echrarts图的方法二来实验，输出如下：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsFormatter.png" alt="formatter"></p><ul><li>拼凑：</li></ul><figure class="highlight js"><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"><span class="attr">formatter</span>: <span class="function">(<span class="params">params</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(params);</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;`</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsFormatter2.png" alt="formatter"></p><ul><li>将tooltip限制在图表区域内：</li></ul><p>当return的东西足够多，会超出浏览器的clientHieght范围</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsFormatter3.png" alt="formatter"></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//相关代码</span></span><br><span class="line"><span class="attr">formatter</span>: <span class="function">(<span class="params">params</span>) =&gt;</span> &#123;</span><br><span class="line"><span class="comment">// console.log(params);</span></span><br><span class="line"><span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;`</span>;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p>解决方法：</p><figure class="highlight js"><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"><span class="attr">tooltip</span>: &#123;</span><br><span class="line"><span class="attr">confine</span>: <span class="literal">true</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/EchartsFormatter4.png" alt="formatter"></p><p>上面的实例就是</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="attr">tooltip</span>: &#123;</span><br><span class="line">    <span class="attr">trigger</span>: <span class="string">&quot;item&quot;</span>,</span><br><span class="line">    <span class="attr">confine</span>: <span class="literal">true</span>,</span><br><span class="line">            <span class="comment">// formatter: &quot;&#123;a&#125; &lt;br/&gt;&#123;b&#125; : &#123;c&#125; (&#123;d&#125;%)&quot;,</span></span><br><span class="line">            <span class="attr">formatter</span>: <span class="function">(<span class="params">params</span>) =&gt;</span> &#123;</span><br><span class="line">                <span class="comment">// console.log(params);</span></span><br><span class="line">                <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;`</span>;</span><br><span class="line">            &#125;,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><ul><li>不希望以”&lt; &#x2F;br &gt;”而是以”\n”作为换行符</li></ul><figure class="highlight js"><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"><span class="attr">tooltip</span>: &#123;</span><br><span class="line"><span class="attr">renderMode</span>: <span class="string">&#x27;richText&#x27;</span>, <span class="comment">// 默认为html</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://blog.csdn.net/m0_37885651/article/details/107984816">echarts下载图片,getDataURL获取base64地址</a></p><p><a href="https://blog.csdn.net/to_love_/article/details/107041675?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-107041675-blog-107984816.pc_relevant_recovery_v2&spm=1001.2101.3001.4242.2&utm_relevant_index=4">通过Js将ECharts导出为图片</a></p><p><a href="https://blog.csdn.net/WWW_share8/article/details/103679701?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-103679701-blog-107984816.pc_relevant_recovery_v2&spm=1001.2101.3001.4242.3&utm_relevant_index=7">关于echarts导出图片不显示数据问题</a></p><p><a href="https://blog.csdn.net/qq_43556594/article/details/117130000?spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-8-117130000-blog-126073245.pc_relevant_3mothn_strategy_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-8-117130000-blog-126073245.pc_relevant_3mothn_strategy_recovery&utm_relevant_index=16">echarts图表切换功能（不改变数据，只切换图形）</a></p><p><a href="https://blog.csdn.net/lilycheng1986/article/details/116234316">echarts：tab切换效果</a></p><p><a href="https://blog.csdn.net/bbt953/article/details/126300280">[echarts]clear和dispose的区别和使用场景</a></p><p><a href="https://blog.csdn.net/qq_38974638/article/details/108986033">ECharts formatter属性设置3种方式（字符串模板，函数模板，回调函数）</a></p><p><a href="https://blog.csdn.net/weixin_42274805/article/details/119613193?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-119613193-blog-101207199.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-119613193-blog-101207199.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=5">[Echarts]如何自定义tooltip formatter</a></p>]]></content>
+        <content type="html"><![CDATA[<h1 id="Echarts"><a href="#Echarts" class="headerlink" title="Echarts"></a>Echarts</h1><p>一个基于 JavaScript 的开源可视化图表库。</p><h2 id="安装方式"><a href="#安装方式" class="headerlink" title="安装方式"></a>安装方式</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">npm init -y   <span class="comment">//初始化项目 </span></span><br><span class="line">npm install echarts --save  <span class="comment">//下载echarts</span></span><br><span class="line"><span class="comment">//ps:原生是不能用npm的;npm导入的得是带有打包工具的,比如webpack;</span></span><br><span class="line"><span class="comment">//原生可以在官网--&gt;入门篇--&gt;获取Echarts--&gt;从 CDN 获取--&gt;最上面的/dist/echarts.min.js--&gt;打开之后右键--&gt;另存为</span></span><br><span class="line">&lt;script src=<span class="string">&quot;./echarts.min.js&quot;</span>&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure><h2 id="快速上手"><a href="#快速上手" class="headerlink" title="快速上手"></a>快速上手</h2><p>参考echarts官网上的快速上手</p><ol><li>引入js文件</li><li>创建一个div来做dom容器；容器必须设置宽高，不然不会出来；</li><li>逻辑处理</li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width:500px;height:500px&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;./echarts.min.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 1.初始化echarts实例</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> myChart = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;box&#x27;</span>));</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// var myChart = echarts.init(document.getElementById(&#x27;box&#x27;),&quot;dark&quot;);  暗黑主题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 2.设置绘图的配置项和数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> userName=[<span class="string">&quot;李白&quot;</span>,<span class="string">&quot;阿离&quot;</span>,<span class="string">&quot;孙尚香&quot;</span>,<span class="string">&quot;虞姬&quot;</span>,<span class="string">&quot;马可&quot;</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> userScore = [<span class="number">100</span>,<span class="number">120</span>,<span class="number">99</span>,<span class="number">89</span>,<span class="number">55</span>,<span class="number">97</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> options =&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">//配置标题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">title</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">text</span>:<span class="string">&quot;学员成绩表鸭&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">//配置x轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">xAxis</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;category&quot;</span>, <span class="comment">//category(类目名称),value(数值)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">data</span>:userName   </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置y轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">yAxis</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;value&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置系列列表(这个是数组对象)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">series</span>:[&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;bar&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">data</span>:userScore</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 3.绘制图形</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    myChart.<span class="title function_">setOption</span>(options);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h2 id="series-配置系列列表"><a href="#series-配置系列列表" class="headerlink" title="series 配置系列列表"></a>series 配置系列列表</h2><p><code>echarts官网--&gt;文档--&gt;配置项手册</code>；其实大部分的图只是series差别比较大，别的几乎一样；</p><ul><li>是一个数组对象   每一个对象{}里面就是一系列数据，都有着自己的data，type…</li><li>label设置提示文本</li><li>itemStyle设置柱子的风格</li><li>markPoint与markLine 设置最大值，最小值与平均值</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//快速上手中,仅修改series配置列表,配置如下:</span></span><br><span class="line"><span class="comment">// 配置系列列表(这个是数组对象)</span></span><br><span class="line"><span class="attr">series</span>:[&#123;</span><br><span class="line">    <span class="attr">type</span>:<span class="string">&quot;bar&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>:userScore,</span><br><span class="line">    <span class="comment">//y轴的提示文本</span></span><br><span class="line">    <span class="attr">label</span>:&#123;</span><br><span class="line">        <span class="attr">show</span>:<span class="literal">true</span>,  <span class="comment">//y轴的数据会展示在每个轴的中心位置(默认位置)</span></span><br><span class="line">        <span class="attr">position</span>:<span class="string">&quot;top&quot;</span>,  <span class="comment">//y轴数据展示在顶部</span></span><br><span class="line">        <span class="attr">rotate</span>:<span class="number">40</span>, <span class="comment">//y轴数据 逆时针旋转40度, -40 就是顺时针旋转</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">barWidth</span>:<span class="number">20</span>, <span class="comment">//设置柱状的宽度</span></span><br><span class="line">    <span class="attr">itemStyle</span>:&#123; </span><br><span class="line">        <span class="attr">borderRadius</span>:[<span class="number">20</span>,<span class="number">20</span>,<span class="number">0</span>,<span class="number">0</span>],<span class="comment">//borderRadius (顺时针左上，右上，右下，左下)</span></span><br><span class="line">        <span class="comment">// color:&#x27;green&#x27;  //一种颜色</span></span><br><span class="line">        <span class="attr">color</span>: <span class="keyword">new</span> echarts.<span class="property">graphic</span>.<span class="title class_">LinearGradient</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">1</span>,[  <span class="comment">//渐变色</span></span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">offset</span>:<span class="number">0</span>,</span><br><span class="line">                <span class="attr">color</span>:<span class="string">&#x27;red&#x27;</span></span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">offset</span>:<span class="number">1</span>,</span><br><span class="line">                <span class="attr">color</span>:<span class="string">&#x27;orange&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        ])</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">markPoint</span>:&#123;  <span class="comment">//设置标记点 max min</span></span><br><span class="line">        <span class="attr">data</span>:[</span><br><span class="line">            &#123;<span class="attr">type</span>:<span class="string">&#x27;max&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;最大值&#x27;</span>&#125;,</span><br><span class="line">            &#123;<span class="attr">type</span>:<span class="string">&#x27;min&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;最小值&#x27;</span>&#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">markLine</span>:&#123;  <span class="comment">//设置标记线  average</span></span><br><span class="line">        <span class="attr">data</span>:[</span><br><span class="line">            &#123;<span class="attr">type</span>:<span class="string">&#x27;average&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;平均值&#x27;</span>&#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;]</span><br></pre></td></tr></table></figure><h2 id="grid-配置网络坐标系"><a href="#grid-配置网络坐标系" class="headerlink" title="grid 配置网络坐标系"></a>grid 配置网络坐标系</h2><p>用来调整坐标系的位置。</p><p><strong>Tip：top、bottom、left、right 在哪个里面都可以用的，用来调整位置；</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置网络坐标系</span></span><br><span class="line"><span class="attr">grid</span>:&#123;</span><br><span class="line">    <span class="attr">show</span>:<span class="literal">true</span>,  <span class="comment">//展示</span></span><br><span class="line">       <span class="attr">top</span>:<span class="string">&quot;30%&quot;</span>,  <span class="comment">//grid 组件离容器上侧的距离</span></span><br><span class="line">       <span class="attr">left</span>:<span class="string">&quot;30%&quot;</span>, <span class="comment">//grid 组件离容器左侧的距离</span></span><br><span class="line">       containLabel :<span class="literal">true</span>, <span class="comment">//grid 区域是否包含坐标轴的刻度标签</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h2 id="tooltip-配置提示语"><a href="#tooltip-配置提示语" class="headerlink" title="tooltip 配置提示语"></a>tooltip 配置提示语</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置提示语</span></span><br><span class="line"><span class="attr">tooltip</span>:&#123;</span><br><span class="line">   <span class="attr">show</span>:<span class="literal">true</span>,</span><br><span class="line">   <span class="attr">trigger</span>:<span class="string">&#x27;axis&#x27;</span>,  <span class="comment">//触发提示类型 item (默认) axis (中间有条细线)</span></span><br><span class="line">   <span class="attr">axisPointer</span>:&#123; <span class="comment">// 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果</span></span><br><span class="line">   <span class="attr">type</span>:<span class="string">&quot;shadow&quot;</span></span><br><span class="line">      &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h2 id="toolbox-工具栏"><a href="#toolbox-工具栏" class="headerlink" title="toolbox 工具栏"></a>toolbox 工具栏</h2><p>内置有<strong>导出图片</strong>，<strong>数据视图</strong>，<strong>动态类型切换</strong>，<strong>数据区域缩放</strong>，<strong>重置</strong>五个工具</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 工具箱</span></span><br><span class="line"><span class="attr">toolbox</span>: &#123;</span><br><span class="line">    <span class="attr">show</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">feature</span>: &#123; <span class="comment">//各工具配置项</span></span><br><span class="line">    <span class="attr">saveAsImage</span>: &#123;&#125;, <span class="comment">//保存图片</span></span><br><span class="line">    <span class="attr">restore</span>: &#123;&#125;, <span class="comment">//配置项还原</span></span><br><span class="line">    <span class="attr">dataView</span>: &#123;&#125;, <span class="comment">//编辑后可以动态更新</span></span><br><span class="line">    <span class="attr">dataZoom</span>: &#123;&#125;, <span class="comment">//数据区域缩放</span></span><br><span class="line">    <span class="attr">magicType</span>: &#123;  <span class="comment">//多种类型切换</span></span><br><span class="line">    <span class="attr">type</span>: [<span class="string">&#x27;line&#x27;</span>, <span class="string">&#x27;bar&#x27;</span>]</span><br><span class="line">    &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h2 id="legend-图例组件"><a href="#legend-图例组件" class="headerlink" title="legend 图例组件"></a>legend 图例组件</h2><p>图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置系列列表(这个是数组对象)</span></span><br><span class="line"><span class="attr">series</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;成绩&quot;</span>, <span class="comment">//必须有</span></span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;bar&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: userScore,</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;身高&quot;</span>,  <span class="comment">//必须有</span></span><br><span class="line">    <span class="attr">type</span>:<span class="string">&quot;bar&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>:userHeight</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 图例组件</span></span><br><span class="line"><span class="attr">legend</span>:&#123;</span><br><span class="line">    <span class="attr">show</span>:<span class="literal">true</span>,</span><br><span class="line">    <span class="attr">icon</span>:<span class="string">&quot;circle&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>大致效果图如下图所示：</p><p><img src="https://img.fsllala.top/1656841820917echarts.png" alt="效果图"></p><p>以上内容都可以在<code>echarts官网--&gt;文档--&gt;配置项手册</code>中找到；</p><h2 id="Echarts事件"><a href="#Echarts事件" class="headerlink" title="Echarts事件"></a>Echarts事件</h2><p>以下内容都可以在<code>echarts官网--&gt;文档--&gt;API</code>中找到；</p><ul><li>监听用户的<strong>全部</strong>事件</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 4.监听用户的点击事件</span></span><br><span class="line"><span class="comment">//全部监听</span></span><br><span class="line">myChart.<span class="title function_">on</span>(<span class="string">&quot;click&quot;</span>,<span class="function">(<span class="params">msg</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(msg);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ul><li>监听用户的<strong>部分</strong>事件</li></ul><figure class="highlight js"><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"><span class="comment">// 筛选 &#123;seriesName:&quot;成绩&quot;&#125;的触发点击事件</span></span><br><span class="line">myChart.<span class="title function_">on</span>(<span class="string">&quot;click&quot;</span>,&#123;<span class="attr">seriesName</span>:<span class="string">&quot;成绩&quot;</span>&#125;,<span class="function">(<span class="params">msg</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(msg)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ul><li>移除监听事件</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 4.2 移除监听事件</span></span><br><span class="line">myChart.<span class="title function_">off</span>(<span class="string">&quot;click&quot;</span>);</span><br></pre></td></tr></table></figure><ul><li>添加<strong>加载中</strong>提示</li></ul><figure class="highlight js"><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"><span class="comment">// 1.初始化echarts实例</span></span><br><span class="line"><span class="keyword">var</span> myChart = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;box&#x27;</span>), <span class="string">&#x27;dark&#x27;</span>);</span><br><span class="line">myChart.<span class="title function_">showLoading</span>();  <span class="comment">//在初始化实例下添加 showLoading  API</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 2.绘制图形</span></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    myChart.<span class="title function_">setOption</span>(options);</span><br><span class="line">    myChart.<span class="title function_">hideLoading</span>();</span><br><span class="line">&#125;,<span class="number">1500</span>); <span class="comment">//设置定时器,让图形1500ms后加载,并隐藏加载提示</span></span><br></pre></td></tr></table></figure><ul><li>Echarts随窗口大小改变(若box固定宽高，则是改变不了的)</li></ul><figure class="highlight js"><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"><span class="comment">// 5.改变大小</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;resize&quot;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">  myChart.<span class="title function_">resize</span>();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="以上内容全部代码"><a href="#以上内容全部代码" class="headerlink" title="以上内容全部代码"></a>以上内容全部代码</h2><ul><li>css</li></ul><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100vw</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100vh</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>html</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li>js</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;./echarts.min.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 1.初始化echarts实例</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> myChart = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;box&#x27;</span>), <span class="string">&#x27;dark&#x27;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    myChart.<span class="title function_">showLoading</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// var myChart = echarts.init(document.getElementById(&#x27;box&#x27;),&quot;dark&quot;);  暗黑主题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 2.设置绘图的配置项和数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> userName = [<span class="string">&quot;李白&quot;</span>, <span class="string">&quot;阿离&quot;</span>, <span class="string">&quot;孙尚香&quot;</span>, <span class="string">&quot;虞姬&quot;</span>, <span class="string">&quot;马可&quot;</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> userScore = [<span class="number">100</span>, <span class="number">120</span>, <span class="number">99</span>, <span class="number">89</span>, <span class="number">55</span>, <span class="number">97</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> userHeight = [<span class="number">176</span>, <span class="number">163</span>, <span class="number">166</span>, <span class="number">178</span>, <span class="number">176</span>, <span class="number">187</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> options = &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">//配置标题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">title</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">text</span>: <span class="string">&quot;学员成绩表鸭&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>: <span class="string">&quot;3%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">left</span>: <span class="string">&quot;3%&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">//配置x轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">xAxis</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">name</span>: <span class="string">&quot;姓名&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>: <span class="string">&quot;category&quot;</span>, <span class="comment">//category(类目名称),value(数值)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">data</span>: userName</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置y轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">yAxis</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">name</span>: <span class="string">&quot;分数&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>: <span class="string">&quot;value&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 图例组件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">legend</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>: <span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">icon</span>: <span class="string">&quot;circle&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>: <span class="string">&quot;3%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 工具箱</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">toolbox</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>: <span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">feature</span>: &#123; <span class="comment">//各工具配置项</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">saveAsImage</span>: &#123;&#125;, <span class="comment">//保存图片</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">restore</span>: &#123;&#125;, <span class="comment">//配置项还原</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">dataView</span>: &#123;&#125;, <span class="comment">//编辑后可以动态更新</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">dataZoom</span>: &#123;&#125;, <span class="comment">//数据区域缩放</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">magicType</span>: &#123; <span class="comment">//多种类型切换</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">type</span>: [<span class="string">&#x27;line&#x27;</span>, <span class="string">&#x27;bar&#x27;</span>]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>: <span class="string">&quot;3%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">right</span>: <span class="string">&quot;3%&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置提示语</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">tooltip</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>: <span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">trigger</span>: <span class="string">&#x27;axis&#x27;</span>, <span class="comment">//触发提示类型 item (默认) axis (中间有条细线)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">axisPointer</span>: &#123; <span class="comment">// 触发动画效果(阴影,xy轴交叉坐标)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">type</span>: <span class="string">&quot;shadow&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置网络坐标系(用来调整坐标系的位置的)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">grid</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>: <span class="literal">true</span>, <span class="comment">//展示</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>: <span class="string">&quot;10%&quot;</span>, <span class="comment">//grid 组件离容器上侧的距离</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">left</span>: <span class="string">&quot;10%&quot;</span>, <span class="comment">//grid 组件离容器左侧的距离</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">containLabel</span>: <span class="literal">true</span>, <span class="comment">//grid 区域是否包含坐标轴的刻度标签</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置系列列表(这个是数组对象)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">series</span>: [&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">name</span>: <span class="string">&quot;成绩&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">type</span>: <span class="string">&quot;bar&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">data</span>: userScore,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="comment">//y轴的提示文本</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">label</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">show</span>: <span class="literal">true</span>, <span class="comment">//y轴的数据会展示在每个轴的中心位置(默认位置)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">position</span>: <span class="string">&quot;top&quot;</span>, <span class="comment">//y轴数据展示在顶部</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">rotate</span>: <span class="number">40</span>, <span class="comment">//y轴数据 逆时针旋转40度, -40 就是顺时针旋转</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="comment">// barWidth: 20, //设置柱状的宽度</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">itemStyle</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">borderRadius</span>: [<span class="number">20</span>, <span class="number">20</span>, <span class="number">0</span>, <span class="number">0</span>], <span class="comment">//(顺时针左上，右上，右下，左下)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="comment">// color:&#x27;green&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">color</span>: <span class="keyword">new</span> echarts.<span class="property">graphic</span>.<span class="title class_">LinearGradient</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">1</span>, [&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">offset</span>: <span class="number">0</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">offset</span>: <span class="number">1</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">color</span>: <span class="string">&#x27;orange&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    ])</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">markPoint</span>: &#123; <span class="comment">//设置标记点 max min</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">data</span>: [&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">type</span>: <span class="string">&#x27;max&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">name</span>: <span class="string">&#x27;最大值&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">type</span>: <span class="string">&#x27;min&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                            <span class="attr">name</span>: <span class="string">&#x27;最小值&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    ]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">markLine</span>: &#123; <span class="comment">//设置标记线  average</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">data</span>: [&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="attr">type</span>: <span class="string">&#x27;average&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="attr">name</span>: <span class="string">&#x27;平均值&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">name</span>: <span class="string">&quot;身高&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">type</span>: <span class="string">&quot;bar&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">data</span>: userHeight</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        ]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 3.绘制图形</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        myChart.<span class="title function_">setOption</span>(options);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        myChart.<span class="title function_">hideLoading</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;, <span class="number">500</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 4.监听用户的点击事件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//全部监听</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// myChart.on(&quot;click&quot;, (msg) =&gt; &#123;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//     console.log(msg);</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// &#125;)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 筛选 &#123;seriesName:&quot;成绩&quot;&#125;的触发点击事件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    myChart.<span class="title function_">on</span>(<span class="string">&quot;click&quot;</span>, &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">seriesName</span>: <span class="string">&quot;成绩&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;, <span class="function">(<span class="params">msg</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="variable language_">console</span>.<span class="title function_">log</span>(msg)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 4.2 移除监听事件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    myChart.<span class="title function_">off</span>(<span class="string">&quot;click&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 5.改变大小</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;resize&quot;</span>, <span class="function">() =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        myChart.<span class="title function_">resize</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h2 id="散点（气泡）图"><a href="#散点（气泡）图" class="headerlink" title="散点（气泡）图"></a>散点（气泡）图</h2><p>身高体重根据bmi，超重的大一点，为红色；不超重的小一点，为绿色；</p><ul><li>css</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">*&#123;</span><br><span class="line"><span class="attr">padding</span>: <span class="number">0</span>;</span><br><span class="line"><span class="attr">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line">#box&#123;</span><br><span class="line">    <span class="attr">width</span>: 100vw;</span><br><span class="line">    <span class="attr">height</span>: 100vh;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>html</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li>js</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;./echarts.min.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 1.初始化Echarts实例</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> myChart = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;box&quot;</span>),<span class="string">&#x27;dark&#x27;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 2.设置绘图的数据和配置项</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 模拟数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> arrs = [&#123;<span class="attr">height</span>:<span class="number">172</span>,<span class="attr">weight</span>:<span class="number">172</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">168</span>,<span class="attr">weight</span>:<span class="number">152</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">156</span>,<span class="attr">weight</span>:<span class="number">152</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">166</span>,<span class="attr">weight</span>:<span class="number">112</span>&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    ,&#123;<span class="attr">height</span>:<span class="number">155</span>,<span class="attr">weight</span>:<span class="number">132</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">148</span>,<span class="attr">weight</span>:<span class="number">113</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">172</span>,<span class="attr">weight</span>:<span class="number">162</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">171</span>,<span class="attr">weight</span>:<span class="number">132</span>&#125;,&#123;<span class="attr">height</span>:<span class="number">173</span>,<span class="attr">weight</span>:<span class="number">132</span>&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    ];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//通过官网的示例可得知为 [[x,y],[x,y],[x,y]] 格式的数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> allData = arrs.<span class="title function_">map</span>(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span> [item.<span class="property">height</span>,item.<span class="property">weight</span>]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> options=&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置标题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">title</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">text</span>:<span class="string">&quot;身高体重图&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">textStyle</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">color</span>:<span class="string">&quot;orange&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>:<span class="string">&quot;5%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">left</span>:<span class="string">&quot;5%&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置X轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">xAxis</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">name</span>:<span class="string">&quot;身高&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>:<span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;value&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">scale</span>:<span class="literal">true</span>,   <span class="comment">//坐标不会强制包含0刻度,只在数值轴中（type: &#x27;value&#x27;）有效</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置y轴</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">yAxis</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">name</span>:<span class="string">&quot;体重&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>:<span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">type</span>:<span class="string">&quot;value&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">scale</span>:<span class="literal">true</span>,  <span class="comment">//坐标不会强制包含0刻度,只在数值轴中（type: &#x27;value&#x27;）有效</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 配置网格坐标系</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">grid</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">show</span>:<span class="literal">false</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">top</span>:<span class="string">&quot;15%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">left</span>:<span class="string">&quot;10%&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">containLabel</span>:<span class="literal">true</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">//配置系列</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">series</span>:[</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">type</span>: <span class="string">&#x27;effectScatter&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">data</span>:allData,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">showEffectOn</span>:<span class="string">&#x27;emphasis&#x27;</span>,  <span class="comment">//配置何时显示特效  emphasis 鼠标移入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">rippleEffect</span>:&#123;  <span class="comment">//设置波纹</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">scale</span>:<span class="number">5</span>   <span class="comment">//波纹大小</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="comment">// 设置标记的大小</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">symbolSize</span>:<span class="keyword">function</span>(<span class="params">info</span>)&#123;   <span class="comment">//因为有条件来区分,所以使用的函数</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="comment">// console.log(info)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="comment">// bmi = 体重kg/(身高m*身高m)  大于28,代表肥胖</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">let</span> bmi = info[<span class="number">1</span>]/<span class="number">2</span>/(info[<span class="number">0</span>]/<span class="number">100</span>*info[<span class="number">0</span>]/<span class="number">100</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">if</span>(bmi&gt;<span class="number">28</span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="number">12</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;<span class="keyword">else</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="number">8</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="comment">//设置标记的颜色</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">itemStyle</span>:&#123; </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="attr">color</span>:<span class="keyword">function</span>(<span class="params">datas</span>)&#123;   <span class="comment">//因为有条件来区分,所以使用的函数</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="comment">// console.log(info)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">let</span> newDatas = datas.<span class="property">value</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">let</span> bmi = newDatas[<span class="number">1</span>]/<span class="number">2</span>/(newDatas[<span class="number">0</span>]/<span class="number">100</span>*newDatas[<span class="number">0</span>]/<span class="number">100</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">if</span>(bmi&gt;<span class="number">28</span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="string">&quot;red&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;<span class="keyword">else</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="keyword">return</span> <span class="string">&quot;green&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        ]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 3.展示</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    myChart.<span class="title function_">setOption</span>(options);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p>大致效果图如下图所示：</p><p><img src="https://img.fsllala.top/1656841907919echarts2.png" alt="图例"></p><h1 id="在vue中使用Echarts"><a href="#在vue中使用Echarts" class="headerlink" title="在vue中使用Echarts"></a>在vue中使用Echarts</h1><h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><ol><li>下载：<code>npm install echarts</code></li><li>在<code>main.js</code>入口文件里引入</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> echarts <span class="keyword">from</span> <span class="string">&quot;echarts&quot;</span>;</span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$echarts</span> = echarts; <span class="comment">//挂载到原型上</span></span><br></pre></td></tr></table></figure><ol start="3"><li>使用</li></ol><figure class="highlight js"><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"><span class="variable language_">this</span>.<span class="property">myChart</span> = <span class="variable language_">this</span>.<span class="property">$echarts</span>.<span class="title function_">init</span>(</span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;xxx&quot;</span>)</span><br><span class="line">   );</span><br></pre></td></tr></table></figure><h2 id="获取Echarts的base64地址"><a href="#获取Echarts的base64地址" class="headerlink" title="获取Echarts的base64地址"></a>获取Echarts的base64地址</h2><blockquote><p>通过官网的<code>getDataURL</code>来获取绘制图像的地址</p></blockquote><p>注意事项：如果在mounted 时候就要获取base64地址会出现如下情况：</p><ul><li>执行getDataURL之前，ECharts的option必须设置好，否则图片出现空白(只有坐标系,没有数据)</li></ul><blockquote><p>把getDataURL这个方法理解成为是一个相机，而你的 展示的图表是一个人在摆姿态。也就是  当照相机  按下快门的一瞬间，你这个人  姿态还没有摆好就已经被拍照了  那么自然 洗出来的 图片就没有效果了</p></blockquote><p>期望的：</p><p><img src="https://img.fsllala.top/EchartsExport.png" alt="期望的"></p><p>通过base64地址,在新的tab页展现的：</p><p><img src="https://img.fsllala.top/EchartsBase64.png" alt="实际上"></p><p>解决方法</p><ul><li>延迟 相机的 拍照时间</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">myChart</span>.<span class="title function_">setOption</span>(option);</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">echartsBase64</span> = <span class="variable language_">this</span>.<span class="property">myChart</span>.<span class="title function_">getDataURL</span>(&#123;</span><br><span class="line">        <span class="attr">backgroundColor</span>: <span class="string">&quot;#fff&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">echartsBase64</span>);</span><br><span class="line">&#125;, <span class="number">1000</span>);</span><br></pre></td></tr></table></figure><ul><li>取消 图表里面动画效果，就是在 option 中添加一个  animation: false 属性 就可以解决这个问题</li></ul><blockquote><p>我们这次是通过点击按钮获取base64地址，所以不会出现此上提及的问题；但是点击的时候需要通过Echarts的getDataURL来获取地址，所以我将Echarts存到了data里面</p></blockquote><figure class="highlight plaintext"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div id=&quot;meetingRoomTrend&quot; style=&quot;width: 500px; height: 500px&quot;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;button @click=&quot;getBase64&quot;&gt;获取EchartsBase64&lt;/button&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;exportEcharts&quot;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      myChart: &quot;&quot;,</span><br><span class="line">      echartsBase64: &quot;&quot;,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    meetingChart() &#123;</span><br><span class="line">      this.myChart = this.$echarts.init(</span><br><span class="line">        document.getElementById(&quot;meetingRoomTrend&quot;)</span><br><span class="line">      );</span><br><span class="line">      //配置图表</span><br><span class="line">      var option = &#123;</span><br><span class="line">        // animation: false,</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          trigger: &quot;axis&quot;,</span><br><span class="line">          axisPointer: &#123;</span><br><span class="line">            type: &quot;shadow&quot;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        legend: &#123;</span><br><span class="line">          show: false,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 工具箱</span><br><span class="line">        toolbox: &#123;</span><br><span class="line">          show: true,</span><br><span class="line">          feature: &#123;</span><br><span class="line">            //各工具配置项</span><br><span class="line">            saveAsImage: &#123; show: true &#125;, //保存图片</span><br><span class="line">            restore: &#123;&#125;, //配置项还原</span><br><span class="line">            dataView: &#123;&#125;, //编辑后可以动态更新</span><br><span class="line">            dataZoom: &#123;&#125;, //数据区域缩放</span><br><span class="line">            magicType: &#123;</span><br><span class="line">              //多种类型切换</span><br><span class="line">              type: [&quot;line&quot;, &quot;bar&quot;],</span><br><span class="line">            &#125;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        grid: &#123;</span><br><span class="line">          left: &quot;3%&quot;,</span><br><span class="line">          right: &quot;4%&quot;,</span><br><span class="line">          bottom: &quot;3%&quot;,</span><br><span class="line">          containLabel: true,</span><br><span class="line">        &#125;,</span><br><span class="line">        xAxis: &#123;</span><br><span class="line">          type: &quot;value&quot;,</span><br><span class="line">          boundaryGap: [0, 0.01],</span><br><span class="line">        &#125;,</span><br><span class="line">        yAxis: &#123;</span><br><span class="line">          type: &quot;category&quot;,</span><br><span class="line">          data: [&quot;会议室01&quot;, &quot;会议室02&quot;, &quot;会议室03&quot;, &quot;会议室04&quot;, &quot;会议室05&quot;],</span><br><span class="line">        &#125;,</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            name: &quot;2012&quot;,</span><br><span class="line">            type: &quot;bar&quot;,</span><br><span class="line">            data: [16, 50, 30, 25, 36],</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line">      this.myChart.setOption(option);</span><br><span class="line">      // setTimeout(() =&gt; &#123;</span><br><span class="line">      //   this.echartsBase64 = this.myChart.getDataURL(&#123;</span><br><span class="line">      //     backgroundColor: &quot;#fff&quot;,</span><br><span class="line">      //   &#125;);</span><br><span class="line">      //   console.log(this.echartsBase64);</span><br><span class="line">      // &#125;, 1000);</span><br><span class="line">    &#125;,</span><br><span class="line">    getBase64() &#123;</span><br><span class="line">      this.echartsBase64 = this.myChart.getDataURL(&#123; backgroundColor: &quot;#fff&quot; &#125;);</span><br><span class="line">      console.log(this.echartsBase64);</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    this.meetingChart();</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><h2 id="通过select切换Echarts图（不改变数据，只切换图形）"><a href="#通过select切换Echarts图（不改变数据，只切换图形）" class="headerlink" title="通过select切换Echarts图（不改变数据，只切换图形）"></a>通过select切换Echarts图（不改变数据，只切换图形）</h2><p>我这里用到了两种方法：</p><ul><li>通过修改series里面的type，即给series里面的type为一个变量,通过修改这个变量为bar，line，pie等来切换图形；</li><li>重新设置options，echarts所有的配置项都在options,改变这个就相当于改变了echarts；同上面的方法相比，上面的缺点是切换为饼状图还会有坐标轴，不妥；此方法的缺点是，代码重复的多，好多个options；</li></ul><blockquote><p>以上方法都有个坑：</p><p>控制台会提示：There is a chart instance already initialized on the dom.</p><p>虽然不影响切换效果，但是总感觉不好</p></blockquote><p>坑的解决方法：</p><ul><li>每次绘制echart前，要dispose()销毁实例一下，否则图会重叠在一起；</li></ul><h3 id="方案一效果："><a href="#方案一效果：" class="headerlink" title="方案一效果："></a>方案一效果：</h3><p><img src="https://img.fsllala.top/EchartsChange1.gif" alt="方案一"></p><h3 id="方法一代码："><a href="#方法一代码：" class="headerlink" title="方法一代码："></a>方法一代码：</h3><figure class="highlight plaintext"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;el-select v-model=&quot;echartsType&quot; @change=&quot;changeEcharts&quot;&gt;</span><br><span class="line">        &lt;el-option</span><br><span class="line">          v-for=&quot;(item, index) in optVal&quot;</span><br><span class="line">          :label=&quot;item.lable&quot;</span><br><span class="line">          :value=&quot;item.value&quot;</span><br><span class="line">          :key=&quot;index&quot;</span><br><span class="line">        &gt;&lt;/el-option&gt;</span><br><span class="line">      &lt;/el-select&gt;</span><br><span class="line">      &lt;div id=&quot;meetingRoomTrend&quot; style=&quot;width: 500px; height: 500px&quot;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;changeEcharts&quot;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      echartsType: &quot;bar&quot;,</span><br><span class="line">      optVal: [</span><br><span class="line">        &#123; lable: &quot;柱状图&quot;, value: &quot;bar&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;折线图&quot;, value: &quot;line&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;饼状图&quot;, value: &quot;pie&quot; &#125;,</span><br><span class="line">      ],</span><br><span class="line">      myChart: &quot;&quot;,</span><br><span class="line">      userName: [&quot;李白&quot;, &quot;阿离&quot;, &quot;孙尚香&quot;, &quot;虞姬&quot;, &quot;马可&quot;],</span><br><span class="line">      userScore: [100, 120, 99, 89, 55, 97],</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    // 通过修改series里面的type,然后将原来的echarts dispose()与重新init来实现的;此方法可用于bar和line两种的切换;加上pie,因为series不同(pie没有横坐标啥的),所以不建议此方法;</span><br><span class="line">    getCharts() &#123;</span><br><span class="line">      this.myChart = this.$echarts.init(</span><br><span class="line">        document.getElementById(&quot;meetingRoomTrend&quot;)</span><br><span class="line">      );</span><br><span class="line">      //   this.myChart.showLoading();</span><br><span class="line">      var options = &#123;</span><br><span class="line">        //配置标题</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;学员成绩表鸭&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        //配置x轴</span><br><span class="line">        xAxis: &#123;</span><br><span class="line">          type: &quot;category&quot;, //category(类目名称),value(数值)</span><br><span class="line">          data: this.userName,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置提示语</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          show: true,</span><br><span class="line">          trigger: &quot;axis&quot;, //触发提示类型 item (默认) axis (中间有条细线)</span><br><span class="line">          axisPointer: &#123;</span><br><span class="line">            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果</span><br><span class="line">            type: &quot;shadow&quot;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置y轴</span><br><span class="line">        yAxis: &#123;</span><br><span class="line">          type: &quot;value&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置系列列表(这个是数组对象)</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            type: this.echartsType,</span><br><span class="line">            data: this.userScore,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      this.myChart.setOption(options);</span><br><span class="line">    &#125;,</span><br><span class="line">    changeEcharts() &#123;</span><br><span class="line">      /**</span><br><span class="line">       * clear类似于v-show</span><br><span class="line">       * dispose类似于v-if</span><br><span class="line">       */</span><br><span class="line">      if (![null, &quot;&quot;, undefined].includes(this.myChart)) &#123;</span><br><span class="line">        // this.myChart.dispose(); //解决echarts dom已经加载的报错</span><br><span class="line">        // this.myChart.clear();</span><br><span class="line">      &#125;</span><br><span class="line">      this.getCharts();</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    this.getCharts();</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><h3 id="方案二效果："><a href="#方案二效果：" class="headerlink" title="方案二效果："></a>方案二效果：</h3><p><img src="https://img.fsllala.top/EchartsChange2.gif" alt="方案二"></p><h3 id="方法二代码："><a href="#方法二代码：" class="headerlink" title="方法二代码："></a>方法二代码：</h3><figure class="highlight plaintext"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;el-select v-model=&quot;echartsType&quot; @change=&quot;changeEcharts&quot;&gt;</span><br><span class="line">        &lt;el-option</span><br><span class="line">          v-for=&quot;(item, index) in optVal&quot;</span><br><span class="line">          :label=&quot;item.lable&quot;</span><br><span class="line">          :value=&quot;item.value&quot;</span><br><span class="line">          :key=&quot;index&quot;</span><br><span class="line">        &gt;&lt;/el-option&gt;</span><br><span class="line">      &lt;/el-select&gt;</span><br><span class="line">      &lt;div id=&quot;meetingRoomTrend&quot; style=&quot;width: 500px; height: 500px&quot;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;changeEcharts&quot;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      echartsType: &quot;bar&quot;,</span><br><span class="line">      optVal: [</span><br><span class="line">        &#123; lable: &quot;柱状图&quot;, value: &quot;bar&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;折线图&quot;, value: &quot;line&quot; &#125;,</span><br><span class="line">        &#123; lable: &quot;饼状图&quot;, value: &quot;pie&quot; &#125;,</span><br><span class="line">      ],</span><br><span class="line">      myChart: &quot;&quot;,</span><br><span class="line">      optionsBar: &quot;&quot;,</span><br><span class="line">      optionsLine: &quot;&quot;,</span><br><span class="line">      optionsPie: &quot;&quot;,</span><br><span class="line">      userName: [&quot;李白&quot;, &quot;阿离&quot;, &quot;孙尚香&quot;, &quot;虞姬&quot;, &quot;马可&quot;],</span><br><span class="line">      userScore: [100, 120, 99, 89, 55, 97],</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    // echarts所有的配置项都在options,改变这个就相当于改变了echarts;</span><br><span class="line">    getCharts() &#123;</span><br><span class="line">      this.myChart = this.$echarts.init(</span><br><span class="line">        document.getElementById(&quot;meetingRoomTrend&quot;)</span><br><span class="line">      );</span><br><span class="line">      this.optionsBar = &#123;</span><br><span class="line">        //配置标题</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;学员成绩表鸭&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        //配置x轴</span><br><span class="line">        xAxis: &#123;</span><br><span class="line">          type: &quot;category&quot;, //category(类目名称),value(数值)</span><br><span class="line">          data: this.userName,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置提示语</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          show: true,</span><br><span class="line">          trigger: &quot;axis&quot;, //触发提示类型 item (默认) axis (中间有条细线)</span><br><span class="line">          axisPointer: &#123;</span><br><span class="line">            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果</span><br><span class="line">            type: &quot;shadow&quot;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置y轴</span><br><span class="line">        yAxis: &#123;</span><br><span class="line">          type: &quot;value&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置系列列表(这个是数组对象)</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            type: &quot;bar&quot;,</span><br><span class="line">            data: this.userScore,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line">      this.optionsLine = &#123;</span><br><span class="line">        //配置标题</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;学员成绩表鸭&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        //配置x轴</span><br><span class="line">        xAxis: &#123;</span><br><span class="line">          type: &quot;category&quot;, //category(类目名称),value(数值)</span><br><span class="line">          data: this.userName,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置提示语</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          show: true,</span><br><span class="line">          trigger: &quot;axis&quot;, //触发提示类型 item (默认) axis (中间有条细线)</span><br><span class="line">          axisPointer: &#123;</span><br><span class="line">            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果</span><br><span class="line">            type: &quot;shadow&quot;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置y轴</span><br><span class="line">        yAxis: &#123;</span><br><span class="line">          type: &quot;value&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        // 配置系列列表(这个是数组对象)</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            type: &quot;line&quot;,</span><br><span class="line">            data: this.userScore,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line">      this.optionsPie = &#123;</span><br><span class="line">        title: &#123;</span><br><span class="line">          text: &quot;Referer of a Website&quot;,</span><br><span class="line">          subtext: &quot;Fake Data&quot;,</span><br><span class="line">          left: &quot;center&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        tooltip: &#123;</span><br><span class="line">          trigger: &quot;item&quot;,</span><br><span class="line">          // confine: true,</span><br><span class="line">          // formatter: &quot;&#123;a&#125; &lt;br/&gt;&#123;b&#125; : &#123;c&#125; (&#123;d&#125;%)&quot;,</span><br><span class="line">         </span><br><span class="line">        &#125;,</span><br><span class="line">        legend: &#123;</span><br><span class="line">          orient: &quot;vertical&quot;,</span><br><span class="line">          left: &quot;left&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        series: [</span><br><span class="line">          &#123;</span><br><span class="line">            name: &quot;Access From&quot;,</span><br><span class="line">            type: &quot;pie&quot;,</span><br><span class="line">            radius: &quot;50%&quot;,</span><br><span class="line">            data: [</span><br><span class="line">              &#123; value: 1048, name: &quot;Search Engine&quot; &#125;,</span><br><span class="line">              &#123; value: 735, name: &quot;Direct&quot; &#125;,</span><br><span class="line">              &#123; value: 580, name: &quot;Email&quot; &#125;,</span><br><span class="line">              &#123; value: 484, name: &quot;Union Ads&quot; &#125;,</span><br><span class="line">              &#123; value: 300, name: &quot;Video Ads&quot; &#125;,</span><br><span class="line">            ],</span><br><span class="line">            emphasis: &#123;</span><br><span class="line">              itemStyle: &#123;</span><br><span class="line">                shadowBlur: 10,</span><br><span class="line">                shadowOffsetX: 0,</span><br><span class="line">                shadowColor: &quot;rgba(0, 0, 0, 0.5)&quot;,</span><br><span class="line">              &#125;,</span><br><span class="line">            &#125;,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      // this.myChart.setOption(options);</span><br><span class="line">    &#125;,</span><br><span class="line">    changeEcharts() &#123;</span><br><span class="line">      /**</span><br><span class="line">       * clear类似于v-show</span><br><span class="line">       * dispose类似于v-if</span><br><span class="line">       */</span><br><span class="line">      if (![null, &quot;&quot;, undefined].includes(this.myChart)) &#123;</span><br><span class="line">        this.myChart.dispose(); ////解决echarts dom已经加载的报错</span><br><span class="line">        // this.myChart.clear();</span><br><span class="line">      &#125;</span><br><span class="line">      if (this.echartsType == &quot;bar&quot;) &#123;</span><br><span class="line">        this.getCharts();</span><br><span class="line">        this.myChart.setOption(this.optionsBar);</span><br><span class="line">      &#125; else if (this.echartsType == &quot;line&quot;) &#123;</span><br><span class="line">        this.getCharts();</span><br><span class="line">        this.myChart.setOption(this.optionsLine);</span><br><span class="line">      &#125; else if (this.echartsType == &quot;pie&quot;) &#123;</span><br><span class="line">        this.getCharts();</span><br><span class="line">        this.myChart.setOption(this.optionsPie);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    this.getCharts();</span><br><span class="line">    this.myChart.setOption(this.optionsBar);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><h2 id="如何自定义tooltip-formatter"><a href="#如何自定义tooltip-formatter" class="headerlink" title="如何自定义tooltip formatter"></a>如何自定义tooltip formatter</h2><blockquote><p>方式有很多，我更趋向回调函数的方式，因为简单明了；</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">tooltip</span>: &#123;</span><br><span class="line">        <span class="attr">formatter</span>:<span class="keyword">function</span>(<span class="params">params</span>)&#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(params);</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;要展示的&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>通过上面切换Echrarts图的方法二来实验，输出如下：</p><p><img src="https://img.fsllala.top/EchartsFormatter.png" alt="formatter"></p><ul><li>拼凑：</li></ul><figure class="highlight js"><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"><span class="attr">formatter</span>: <span class="function">(<span class="params">params</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(params);</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;`</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/EchartsFormatter2.png" alt="formatter"></p><ul><li>将tooltip限制在图表区域内：</li></ul><p>当return的东西足够多，会超出浏览器的clientHieght范围</p><p><img src="https://img.fsllala.top/EchartsFormatter3.png" alt="formatter"></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//相关代码</span></span><br><span class="line"><span class="attr">formatter</span>: <span class="function">(<span class="params">params</span>) =&gt;</span> &#123;</span><br><span class="line"><span class="comment">// console.log(params);</span></span><br><span class="line"><span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;`</span>;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p>解决方法：</p><figure class="highlight js"><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"><span class="attr">tooltip</span>: &#123;</span><br><span class="line"><span class="attr">confine</span>: <span class="literal">true</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/EchartsFormatter4.png" alt="formatter"></p><p>上面的实例就是</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="attr">tooltip</span>: &#123;</span><br><span class="line">    <span class="attr">trigger</span>: <span class="string">&quot;item&quot;</span>,</span><br><span class="line">    <span class="attr">confine</span>: <span class="literal">true</span>,</span><br><span class="line">            <span class="comment">// formatter: &quot;&#123;a&#125; &lt;br/&gt;&#123;b&#125; : &#123;c&#125; (&#123;d&#125;%)&quot;,</span></span><br><span class="line">            <span class="attr">formatter</span>: <span class="function">(<span class="params">params</span>) =&gt;</span> &#123;</span><br><span class="line">                <span class="comment">// console.log(params);</span></span><br><span class="line">                <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;<span class="subst">$&#123;params.seriesName&#125;</span>&lt;br/&gt;`</span>;</span><br><span class="line">            &#125;,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><ul><li>不希望以”&lt; &#x2F;br &gt;”而是以”\n”作为换行符</li></ul><figure class="highlight js"><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"><span class="attr">tooltip</span>: &#123;</span><br><span class="line"><span class="attr">renderMode</span>: <span class="string">&#x27;richText&#x27;</span>, <span class="comment">// 默认为html</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://blog.csdn.net/m0_37885651/article/details/107984816">echarts下载图片,getDataURL获取base64地址</a></p><p><a href="https://blog.csdn.net/to_love_/article/details/107041675?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-107041675-blog-107984816.pc_relevant_recovery_v2&spm=1001.2101.3001.4242.2&utm_relevant_index=4">通过Js将ECharts导出为图片</a></p><p><a href="https://blog.csdn.net/WWW_share8/article/details/103679701?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-103679701-blog-107984816.pc_relevant_recovery_v2&spm=1001.2101.3001.4242.3&utm_relevant_index=7">关于echarts导出图片不显示数据问题</a></p><p><a href="https://blog.csdn.net/qq_43556594/article/details/117130000?spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-8-117130000-blog-126073245.pc_relevant_3mothn_strategy_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-8-117130000-blog-126073245.pc_relevant_3mothn_strategy_recovery&utm_relevant_index=16">echarts图表切换功能（不改变数据，只切换图形）</a></p><p><a href="https://blog.csdn.net/lilycheng1986/article/details/116234316">echarts：tab切换效果</a></p><p><a href="https://blog.csdn.net/bbt953/article/details/126300280">[echarts]clear和dispose的区别和使用场景</a></p><p><a href="https://blog.csdn.net/qq_38974638/article/details/108986033">ECharts formatter属性设置3种方式（字符串模板，函数模板，回调函数）</a></p><p><a href="https://blog.csdn.net/weixin_42274805/article/details/119613193?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-119613193-blog-101207199.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-119613193-blog-101207199.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=5">[Echarts]如何自定义tooltip formatter</a></p>]]></content>
       
       
       <categories>
@@ -793,7 +793,7 @@
       <link href="/articles/e8f85541.html"/>
       <url>/articles/e8f85541.html</url>
       
-        <content type="html"><![CDATA[<h1 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h1><h2 id="构造函数创建对象"><a href="#构造函数创建对象" class="headerlink" title="构造函数创建对象"></a>构造函数创建对象</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;zs&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person1.<span class="property">name</span>)</span><br></pre></td></tr></table></figure><p>在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。很简单吧，接下来进入正题：</p><h2 id="prototype"><a href="#prototype" class="headerlink" title="prototype"></a>prototype</h2><p>每个函数或者类(其实本质就是一个函数)都天生自带prototype属性，prototype是对象数据类型。</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 虽然写在注释里，但是你要注意：</span></span><br><span class="line"><span class="comment">// prototype是函数才会有的属性</span></span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">name</span> = <span class="string">&#x27;zs&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"><span class="keyword">var</span> person2 = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person1.<span class="property">name</span>) <span class="comment">// zs</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person2.<span class="property">name</span>) <span class="comment">// zs</span></span><br></pre></td></tr></table></figure><p>那这个函数的prototype属性到底指向什么呢？是这个函数的原型吗？</p><p>其实，函数的prototype属性指向了一个对象，这个对象正是调用该构造函数而创建<strong>实例</strong>的原型，也就是上述例子中person1和person2的原型。</p><p>那什么是原型呢？你可以这样理解：每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型”继承”属性。</p><p>让我们用一张图表示构造函数和实例原型之间的关系：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847783916yx.png" alt="原型1"></p><p>在这张图中我们用 Object.prototype 表示实例原型。</p><p>那么我们该怎么表示实例与实例原型，也就是 person 和 Person.prototype 之间的关系呢，这时候我们就要讲到第二个属性：</p><h2 id="proto"><a href="#proto" class="headerlink" title="proto"></a><strong>proto</strong></h2><p>这是每一个JavaScript对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向该对象的原型。</p><p>为了证明这一点,我们可以在火狐或者谷歌中输入：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">__proto__</span> === <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure><p>于是我们更新下关系图：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847817916yx2.png" alt="原型2"></p><p>既然实例对象和构造函数都可以指向原型，那么原型是否有属性指向构造函数或者实例呢？</p><h2 id="constructor-NaN"><a href="#constructor-NaN" class="headerlink" title="constructor"></a>constructor</h2><p>指向实例倒是没有，因为一个构造函数可以生成多个实例，但是原型指向构造函数倒是有的，这就要讲到第三个属性：constructor，每个原型都有一个 constructor 属性指向关联的构造函数。</p><p>为了验证这一点，我们可以尝试：</p><figure class="highlight js"><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"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span> === <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure><p>所以再更新下关系图：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847852917yx3.png" alt="原型3"></p><p>综上我们已经得出：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">__proto__</span> == <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>) <span class="comment">// true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> == <span class="title class_">Person</span>) <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 顺便学习一个ES5的方法,可以获得对象的原型</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">getPrototypeOf</span>(person) === <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>) <span class="comment">// true</span></span><br></pre></td></tr></table></figure><h2 id="简述"><a href="#简述" class="headerlink" title="简述"></a>简述</h2><p>以上内容可以用以下简述</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">  每个函数或者类(其实本质就是一个函数)都天生自带prototype属性   </span></span><br><span class="line"><span class="comment">  prototype是对象数据类型,浏览器天生给prototype这个对象增加了constructor属性,指向当前函数本身</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;哈哈&quot;</span>)</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Max</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;hha&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">dir</span>(sum);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">dir</span>(<span class="title class_">Max</span>);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847890917yx4.png" alt="原型4"></p><h1 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h1><p>原型链是一种查找机制，当前实例用到某个属性或方法，当前实例自己有先用私有的，私有的没有，当前实例会通过__proto__这个属性，往当前这个实例所属类的原型进行查找，找不不到再通过__proto__这个属性往原型的原型进行查找，直到找不到为止就结束了；(找不到是null)</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">name</span> = <span class="string">&#x27;Kevin&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"></span><br><span class="line">person.<span class="property">name</span> = <span class="string">&#x27;Daisy&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name</span>) <span class="comment">// Daisy</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">delete</span> person.<span class="property">name</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name</span>) <span class="comment">// Kevin</span></span><br></pre></td></tr></table></figure><p>在这个例子中，我们给实例对象 person 添加了 name 属性，当我们打印 person.name 的时候，结果自然为 Daisy。</p><p>但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.<strong>proto</strong> ，也就是 Person.prototype中查找，幸运的是我们找到了 name 属性，结果为 Kevin。</p><p>但是万一还没有找到呢？原型的原型又是什么呢？</p><h2 id="原型的原型"><a href="#原型的原型" class="headerlink" title="原型的原型"></a>原型的原型</h2><p>在前面，我们已经讲了原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它，那就是：</p><figure class="highlight js"><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"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">obj.<span class="property">name</span> = <span class="string">&#x27;Kevin&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span>) <span class="comment">// Kevin</span></span><br></pre></td></tr></table></figure><p>其实原型对象(Person.prototype)就是通过 Object 构造函数生成的，结合之前所讲，实例的 <strong>proto</strong> 指向构造函数的 prototype ，所以我们再更新下关系图：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847925973yx5.png" alt="原型链"></p><p>那Object.prototype 的原型呢？</p><p>null，我们可以打印：</p><p><code>console.log(Object.prototype.__proto__ === null) // true</code></p><p>所以查找属性的时候查到 Object.prototype 就可以停止查找了。最后一张关系图也可以更新为：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847955916yx6.png" alt="原型与原型链"></p><p>顺便还要说一下，图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。</p><h1 id="后续补充"><a href="#后续补充" class="headerlink" title="后续补充"></a>后续补充</h1><ul><li><p>本质上，所有的对象都是通过<code>new 函数</code>的方式创建的；</p><figure class="highlight js"><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"><span class="comment">// 例如</span></span><br><span class="line"><span class="keyword">const</span> obj = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">obj.<span class="property">name</span>=<span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">obj.<span class="property">age</span>=<span class="number">18</span>;</span><br></pre></td></tr></table></figure></li><li><p>隐式原型(<strong>proto</strong>)是所有对象都有的，然而(实例)原型也是个对象，所以(实例)原型也有隐式原型(<strong>proto</strong>)；</p></li><li><p>(实例)原型本身也是一个对象，默认情况下，他是通过<code>new Object()</code>创建的；所以原型的隐式原型(<strong>proto</strong>)指向Object实例对象的显示原型(prototype)；</p></li><li><p>上述也可以用下图表示：</p></li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/prototype_add.png"></p><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://github.com/mqyqingfeng/Blog/issues/2">mqyqingfeng_blog</a></p>]]></content>
+        <content type="html"><![CDATA[<h1 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h1><h2 id="构造函数创建对象"><a href="#构造函数创建对象" class="headerlink" title="构造函数创建对象"></a>构造函数创建对象</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;zs&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person1.<span class="property">name</span>)</span><br></pre></td></tr></table></figure><p>在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。很简单吧，接下来进入正题：</p><h2 id="prototype"><a href="#prototype" class="headerlink" title="prototype"></a>prototype</h2><p>每个函数或者类(其实本质就是一个函数)都天生自带prototype属性，prototype是对象数据类型。</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 虽然写在注释里，但是你要注意：</span></span><br><span class="line"><span class="comment">// prototype是函数才会有的属性</span></span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">name</span> = <span class="string">&#x27;zs&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"><span class="keyword">var</span> person2 = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person1.<span class="property">name</span>) <span class="comment">// zs</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person2.<span class="property">name</span>) <span class="comment">// zs</span></span><br></pre></td></tr></table></figure><p>那这个函数的prototype属性到底指向什么呢？是这个函数的原型吗？</p><p>其实，函数的prototype属性指向了一个对象，这个对象正是调用该构造函数而创建<strong>实例</strong>的原型，也就是上述例子中person1和person2的原型。</p><p>那什么是原型呢？你可以这样理解：每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型”继承”属性。</p><p>让我们用一张图表示构造函数和实例原型之间的关系：</p><p><img src="https://img.fsllala.top/1656847783916yx.png" alt="原型1"></p><p>在这张图中我们用 Object.prototype 表示实例原型。</p><p>那么我们该怎么表示实例与实例原型，也就是 person 和 Person.prototype 之间的关系呢，这时候我们就要讲到第二个属性：</p><h2 id="proto"><a href="#proto" class="headerlink" title="proto"></a><strong>proto</strong></h2><p>这是每一个JavaScript对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向该对象的原型。</p><p>为了证明这一点,我们可以在火狐或者谷歌中输入：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">__proto__</span> === <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure><p>于是我们更新下关系图：</p><p><img src="https://img.fsllala.top/1656847817916yx2.png" alt="原型2"></p><p>既然实例对象和构造函数都可以指向原型，那么原型是否有属性指向构造函数或者实例呢？</p><h2 id="constructor-NaN"><a href="#constructor-NaN" class="headerlink" title="constructor"></a>constructor</h2><p>指向实例倒是没有，因为一个构造函数可以生成多个实例，但是原型指向构造函数倒是有的，这就要讲到第三个属性：constructor，每个原型都有一个 constructor 属性指向关联的构造函数。</p><p>为了验证这一点，我们可以尝试：</p><figure class="highlight js"><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"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span> === <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure><p>所以再更新下关系图：</p><p><img src="https://img.fsllala.top/1656847852917yx3.png" alt="原型3"></p><p>综上我们已经得出：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">__proto__</span> == <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>) <span class="comment">// true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> == <span class="title class_">Person</span>) <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 顺便学习一个ES5的方法,可以获得对象的原型</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">getPrototypeOf</span>(person) === <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>) <span class="comment">// true</span></span><br></pre></td></tr></table></figure><h2 id="简述"><a href="#简述" class="headerlink" title="简述"></a>简述</h2><p>以上内容可以用以下简述</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">  每个函数或者类(其实本质就是一个函数)都天生自带prototype属性   </span></span><br><span class="line"><span class="comment">  prototype是对象数据类型,浏览器天生给prototype这个对象增加了constructor属性,指向当前函数本身</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;哈哈&quot;</span>)</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Max</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;hha&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">dir</span>(sum);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">dir</span>(<span class="title class_">Max</span>);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656847890917yx4.png" alt="原型4"></p><h1 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h1><p>原型链是一种查找机制，当前实例用到某个属性或方法，当前实例自己有先用私有的，私有的没有，当前实例会通过__proto__这个属性，往当前这个实例所属类的原型进行查找，找不不到再通过__proto__这个属性往原型的原型进行查找，直到找不到为止就结束了；(找不到是null)</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">name</span> = <span class="string">&#x27;Kevin&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"></span><br><span class="line">person.<span class="property">name</span> = <span class="string">&#x27;Daisy&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name</span>) <span class="comment">// Daisy</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">delete</span> person.<span class="property">name</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name</span>) <span class="comment">// Kevin</span></span><br></pre></td></tr></table></figure><p>在这个例子中，我们给实例对象 person 添加了 name 属性，当我们打印 person.name 的时候，结果自然为 Daisy。</p><p>但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.<strong>proto</strong> ，也就是 Person.prototype中查找，幸运的是我们找到了 name 属性，结果为 Kevin。</p><p>但是万一还没有找到呢？原型的原型又是什么呢？</p><h2 id="原型的原型"><a href="#原型的原型" class="headerlink" title="原型的原型"></a>原型的原型</h2><p>在前面，我们已经讲了原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它，那就是：</p><figure class="highlight js"><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"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">obj.<span class="property">name</span> = <span class="string">&#x27;Kevin&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span>) <span class="comment">// Kevin</span></span><br></pre></td></tr></table></figure><p>其实原型对象(Person.prototype)就是通过 Object 构造函数生成的，结合之前所讲，实例的 <strong>proto</strong> 指向构造函数的 prototype ，所以我们再更新下关系图：</p><p><img src="https://img.fsllala.top/1656847925973yx5.png" alt="原型链"></p><p>那Object.prototype 的原型呢？</p><p>null，我们可以打印：</p><p><code>console.log(Object.prototype.__proto__ === null) // true</code></p><p>所以查找属性的时候查到 Object.prototype 就可以停止查找了。最后一张关系图也可以更新为：</p><p><img src="https://img.fsllala.top/1656847955916yx6.png" alt="原型与原型链"></p><p>顺便还要说一下，图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。</p><h1 id="后续补充"><a href="#后续补充" class="headerlink" title="后续补充"></a>后续补充</h1><ul><li><p>本质上，所有的对象都是通过<code>new 函数</code>的方式创建的；</p><figure class="highlight js"><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"><span class="comment">// 例如</span></span><br><span class="line"><span class="keyword">const</span> obj = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">obj.<span class="property">name</span>=<span class="string">&quot;fsllala&quot;</span>;</span><br><span class="line">obj.<span class="property">age</span>=<span class="number">18</span>;</span><br></pre></td></tr></table></figure></li><li><p>隐式原型(<strong>proto</strong>)是所有对象都有的，然而(实例)原型也是个对象，所以(实例)原型也有隐式原型(<strong>proto</strong>)；</p></li><li><p>(实例)原型本身也是一个对象，默认情况下，他是通过<code>new Object()</code>创建的；所以原型的隐式原型(<strong>proto</strong>)指向Object实例对象的显示原型(prototype)；</p></li><li><p>上述也可以用下图表示：</p></li></ul><p><img src="https://img.fsllala.top/prototype_add.png"></p><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://github.com/mqyqingfeng/Blog/issues/2">mqyqingfeng_blog</a></p>]]></content>
       
       
       <categories>
@@ -855,7 +855,7 @@
       <link href="/articles/df38ec5a.html"/>
       <url>/articles/df38ec5a.html</url>
       
-        <content type="html"><![CDATA[<h1 id="EventLoop-事件循环"><a href="#EventLoop-事件循环" class="headerlink" title="EventLoop(事件循环)"></a>EventLoop(事件循环)</h1><h2 id="概念："><a href="#概念：" class="headerlink" title="概念："></a>概念：</h2><p>首先我们需要知道JS是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656842096917eventLoop.png" alt="eventLoop"></p><p>导图要表达的内容用文字来表述的话：</p><ul><li>同步和异步任务分别进入不同的执行”场所”，同步的进入主线程，异步的进入Event Table并注册函数。</li><li>当指定的事情完成时，Event Table会将这个函数移入Event Queue(任务队列)。</li><li>主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。</li><li>上述过程会不断重复，也就是常说的Event Loop(事件循环)。</li><li>事件循环中，每进行一次循环操作称为tick。</li></ul><h2 id="何为异步"><a href="#何为异步" class="headerlink" title="何为异步"></a>何为异步</h2><p>代码在执行过程中，会遇到一些无法立即处理的任务，比如：</p><ul><li>计时完成后需要执行的任务 ：setTimeout<code>、</code>setInterval&#96;；</li><li>网络通信完成后需要执行的任务 ： <code>XHR</code>、<code>Fetch</code>；</li><li>用户操作后需要执行的任务： <code>addEventListener</code>；</li><li>如果让<strong>渲染主线程</strong>等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」；</li><li>渲染主线程承担着极其重要的工作，无论如何都不能阻塞，因此，浏览器选择<strong>异步</strong>来解决这个问题；</li><li>使用异步的方式，<strong>渲染主线程永不阻塞</strong>；</li></ul><blockquote><p>面试题：如何理解 JS 的异步？</p><p>参考答案：</p><p>JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。</p><p>而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。</p><p>如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。</p><p>所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。</p><p>在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。</p></blockquote><h2 id="线程与进程"><a href="#线程与进程" class="headerlink" title="线程与进程"></a>线程与进程</h2><h3 id="线程和进程是操作系统中的两个概念："><a href="#线程和进程是操作系统中的两个概念：" class="headerlink" title="线程和进程是操作系统中的两个概念："></a>线程和进程是操作系统中的两个概念：</h3><ul><li>进程（process）：计算机已经运行的程序（程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程）；</li><li>线程（thread）：操作系统能够运行运算调度的最小单位；</li></ul><h3 id="听起来很抽象，我们直观一点解释："><a href="#听起来很抽象，我们直观一点解释：" class="headerlink" title="听起来很抽象，我们直观一点解释："></a>听起来很抽象，我们直观一点解释：</h3><ul><li>进程：我们可以认为，启动一个应用程序，就会默认启动一个进程（每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意）；</li><li>线程：一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行程序的代码，该线程称之为主线程；</li><li>如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程；</li></ul><h3 id="再用一个形象的例子解释："><a href="#再用一个形象的例子解释：" class="headerlink" title="再用一个形象的例子解释："></a>再用一个形象的例子解释：</h3><ul><li>操作系统类似于一个工厂；</li><li>工厂中里有很多车间，这个车间就是进程；</li><li>每个车间可能有一个以上的工人在工厂，这个工人就是线程；</li></ul><h2 id="多进程多线程开发"><a href="#多进程多线程开发" class="headerlink" title="多进程多线程开发"></a>多进程多线程开发</h2><blockquote><p>操作系统是如何做到同时让多个进程（边听歌、边写代码、边查阅资料）同时工作呢？</p></blockquote><ul><li>这是因为CPU的运算速度非常快，它可以快速的在多个进程之间迅速的切换；</li><li>当我们的进程中的线程获取获取到时间片时，就可以快速执行我们编写的代码；</li><li>对于用于来说是感受不到这种快速的切换的；</li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/jincheng.png" alt="进程与线程"></p><h2 id="浏览器多进程"><a href="#浏览器多进程" class="headerlink" title="浏览器多进程"></a>浏览器多进程</h2><blockquote><p>浏览器内部工作极其复杂，为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。</p></blockquote><p>它主要包括以下进程：</p><ul><li><p>浏览器进程：浏览器的主进程，唯一，负责创建和销毁其它进程、浏览器界面的展示、用户交互，前进后退等。</p></li><li><p>GPU 进程：用于 3D 绘制等，最多一个。</p></li><li><p>网络进程：负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。</p></li><li><p>第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建。</p></li><li><p>浏览器渲染进程（浏览器内核）：渲染进程启动后，会开启一个<strong>渲染主线程</strong>，主线程负责执行 HTML、CSS、JS 代码。默认情况下，浏览器会为每个标签页（Tab页）开启一个新的渲染进程，以保证不同的标签页之间不相互影响。</p><ul><li><p>每个进程中又有很多的线程，其中包括执行JavaScript代码的线程；</p><blockquote><p>但是JavaScript的代码执行是在一个单独的线程中执行的；这就意味着JavaScript的代码，在同一个时刻只能做一件事；如果这件事是非常耗时的，就意味着当前的线程就会被阻塞；</p></blockquote></li></ul></li></ul><h2 id="宏任务与微任务"><a href="#宏任务与微任务" class="headerlink" title="宏任务与微任务"></a>宏任务与微任务</h2><p>宏任务是由宿主发起的，而微任务是由JS发起的。</p><table><thead><tr><th align="center">名称</th><th align="center">宏任务(macrotask)</th><th align="center">微任务(microtask)</th></tr></thead><tbody><tr><td align="center">谁发起的</td><td align="center">宿主(node、浏览器)</td><td align="center">JS引擎</td></tr><tr><td align="center">谁先运行</td><td align="center">后运行</td><td align="center">先运行</td></tr><tr><td align="center">会触发新一轮Tick吗</td><td align="center">会</td><td align="center">不会</td></tr></tbody></table><blockquote><p>事件循环中维护着两个队列</p></blockquote><ol><li>宏任务队列主要包括：</li></ol><ul><li>script(整体代码)  ps:可以理解为外层同步代码</li><li>ajax</li><li>setTimeout</li><li>setInterval</li><li>UI交互事件</li><li>I&#x2F;O（Node.js）</li><li>setImmediate(Node.js 环境)</li></ul><ol start="2"><li>微任务队列主要包括：</li></ol><ul><li>Promise的then回调</li><li>process.nextTick（Node.js）</li><li>Mutation Observer API</li><li>queueMicrotask()</li></ul><h2 id="宏任务与微任务是怎么执行的"><a href="#宏任务与微任务是怎么执行的" class="headerlink" title="宏任务与微任务是怎么执行的"></a>宏任务与微任务是怎么执行的</h2><ul><li><p>main script中的代码优先执行（编写的顶层script代码）；</p></li><li><p>在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行；</p></li><li><p>也就是宏任务执行之前，必须保证微任务队列是空的；</p></li><li><p>如果不为空，那么就优先执行微任务队列中的任务（回调）；</p></li><li><p>总结：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。（每次执行宏任务之前，都会在微任务队列里检查有没有微任务，有的话就先把微任务队列里执行完，然后再执行此个宏任务）</p></li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656842195916eventLoop1.png" alt="宏微任务"></p><h2 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h2><p>DEMO1：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;1&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve</span>)&#123;    </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;2&#x27;</span>);</span><br><span class="line"><span class="title function_">resolve</span>();</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;    </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;3&#x27;</span>);</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;4&#x27;</span>)</span><br><span class="line">&#125;); </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;5&#x27;</span>);</span><br><span class="line"><span class="comment">// 2 5 3 4 1</span></span><br></pre></td></tr></table></figure><p>分析：(其实先找同步的，然后再找微任务，再找宏任务比较快)  ps：看第2条</p><ol><li>遇到setTimout，异步宏任务，放入宏任务队列中</li><li>遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出2</li><li>而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中</li><li>遇到同步任务console.log(‘5’);输出5；主线程中同步任务执行完</li><li>从微任务队列中取出任务到主线程中，输出3、 4，微任务队列为空</li><li>从宏任务队列中取出任务到主线程中，输出1，宏任务队列为空</li></ol><p>DEMO2：</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span>&#123;</span><br><span class="line">  <span class="title function_">resolve</span>();</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;test&#x27;</span>);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">4</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">resolve</span>();</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>)</span><br><span class="line">&#125;).<span class="title function_">then</span>( <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span>);</span><br><span class="line">  <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;before timeout&#x27;</span>);</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;also before timeout&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span>);</span><br><span class="line"><span class="comment">//1 2 3 before timeout also before timeout 4 test</span></span><br></pre></td></tr></table></figure><p>分析：</p><ol><li>看到setTimeout，为宏任务，直接不用管了，往下找</li><li>看到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出1</li><li>而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中</li><li>遇到同步任务console.log(‘2’);输出2；主线程中同步任务执行完</li><li>微任务队列中取出任务到主线程中，输出3，此微任务中又有微任务，Promise.resolve().then(微任务a).then(微任务b)，将其依次放入微任务队列中</li><li>从微任务队列中取出任务a到主线程中，输出 before timeout；</li><li>从微任务队列中取出任务b到主线程中，任务b又注册了一个微任务c，放入微任务队列中；</li><li>从微任务队列中取出任务c到主线程中，输出 also before timeout；微任务队列为空</li><li>从宏任务队列中取出任务到主线程，此任务中注册了一个微任务d，将其放入微任务队列中，接下来遇到输出4，宏任务队列为空</li><li>从微任务队列中取出任务d到主线程 ，输出test，微任务队列为空</li></ol><p>DEMO3：</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;1&#x27;</span>);</span><br><span class="line"></span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;2&#x27;</span>);</span><br><span class="line">    process.<span class="title function_">nextTick</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;3&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve</span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;4&#x27;</span>);</span><br><span class="line">      <span class="title function_">resolve</span>();</span><br><span class="line">    &#125;).<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;5&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  process.<span class="title function_">nextTick</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;6&#x27;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;7&#x27;</span>);</span><br><span class="line">    <span class="title function_">resolve</span>();</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;8&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;9&#x27;</span>);</span><br><span class="line">    process.<span class="title function_">nextTick</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;10&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve</span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;11&#x27;</span>);</span><br><span class="line">      <span class="title function_">resolve</span>();</span><br><span class="line">    &#125;).<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;12&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">//1 7 6 8 2 4 3 5 9 11 10 12</span></span><br></pre></td></tr></table></figure><p>分析：(大白话版)</p><ol><li>同步任务直接输出 1</li><li>遇到setTimeout，加入宏任务队列(后执行的那种，整个函数就先不用看了)</li><li>process.nextTick，加入微任务队列</li><li>new Promise,new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出7</li><li>而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中</li><li>遇到setTimeout，加入宏任务队列(后执行的那种，整个函数就先不用看了)   主线程中同步任务执行完</li><li>找微任务，因为是栈，所以先入先出，所以从上往下找，process.nextTick 输出 6</li><li>new Promise.then  输出 8</li><li>找宏任务；在宏任务里面先找同步代码 输出 2 、4；然后找微任务：输出3、5</li><li>找宏任务；在宏任务里面先找同步代码 输出 9、11；然后找微任务：输出10、12</li></ol><p>DEMO4:</p><blockquote><p>async await是promise的语法糖</p></blockquote><ul><li>我们可以将await关键字后面执行的代码,看做是包裹在(resolve,reject)&#x3D;&gt;{函数执行}的代码；</li><li>await 的下一条语句,可以看做是then(res&#x3D;&gt;{函数执行})中的代码；</li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/asyncQuenen.png" alt="async执行"></p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">    <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">async1</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;async1 start&quot;</span>);</span><br><span class="line">        <span class="keyword">await</span> <span class="title function_">async2</span>();</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;async1 end&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">async2</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;async2&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;script start&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;setTimeout&quot;</span>);</span><br><span class="line">    &#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">async1</span>();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;promise1&quot;</span>);</span><br><span class="line">        <span class="title function_">resolve</span>();</span><br><span class="line">    &#125;).<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;promise2&quot;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;script end&quot;</span>);</span><br><span class="line"><span class="comment">//script start  async1 start  async2  promise1  script end  async1 end  promise2  setTimeout</span></span><br></pre></td></tr></table></figure><p>分析：</p><ol><li>遇到函数 async1，async2定义，不会执行，不用管；</li><li>同步任务：输出 “script start”</li><li>setTimeout，加入宏任务队列；</li><li>async1()调用，输出 “async1 start”；下一行：await async2();相当于promise里面的resolve包裹的代码,直接执行，输出”async2”；下一行 ：console.log(“async1 end”);相当于promise中的then，加入微任务队列；</li><li>输出”promise1”，resolve()调用.then中的代码,但是为微任务，加入微任务队列；</li><li>输出”script end”</li><li>在微任务队列中查找，不为空，依次执行队列：输出”async1 end”；输出”promise2”</li><li>在宏任务队列中查找，检查微任务队列是否为空，为空，执行此个宏任务，输出”setTimeout”</li></ol><h1 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h1><ul><li><a href="https://blog.csdn.net/NancyFyn/article/details/118407548?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~LandingCtr~Rate-1.queryctrv4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~LandingCtr~Rate-1.queryctrv4&utm_relevant_index=2">什么是宏任务、微任务？宏任务、微任务有哪些？又是怎么执行的？</a></li><li><a href="https://zhuanlan.zhihu.com/p/87684858">深入理解事件循环</a></li><li><a href="https://www.cnblogs.com/wangziye/p/9566454.html">JS宏任务和微任务</a></li></ul>]]></content>
+        <content type="html"><![CDATA[<h1 id="EventLoop-事件循环"><a href="#EventLoop-事件循环" class="headerlink" title="EventLoop(事件循环)"></a>EventLoop(事件循环)</h1><h2 id="概念："><a href="#概念：" class="headerlink" title="概念："></a>概念：</h2><p>首先我们需要知道JS是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。</p><p><img src="https://img.fsllala.top/1656842096917eventLoop.png" alt="eventLoop"></p><p>导图要表达的内容用文字来表述的话：</p><ul><li>同步和异步任务分别进入不同的执行”场所”，同步的进入主线程，异步的进入Event Table并注册函数。</li><li>当指定的事情完成时，Event Table会将这个函数移入Event Queue(任务队列)。</li><li>主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。</li><li>上述过程会不断重复，也就是常说的Event Loop(事件循环)。</li><li>事件循环中，每进行一次循环操作称为tick。</li></ul><h2 id="何为异步"><a href="#何为异步" class="headerlink" title="何为异步"></a>何为异步</h2><p>代码在执行过程中，会遇到一些无法立即处理的任务，比如：</p><ul><li>计时完成后需要执行的任务 ：setTimeout<code>、</code>setInterval&#96;；</li><li>网络通信完成后需要执行的任务 ： <code>XHR</code>、<code>Fetch</code>；</li><li>用户操作后需要执行的任务： <code>addEventListener</code>；</li><li>如果让<strong>渲染主线程</strong>等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」；</li><li>渲染主线程承担着极其重要的工作，无论如何都不能阻塞，因此，浏览器选择<strong>异步</strong>来解决这个问题；</li><li>使用异步的方式，<strong>渲染主线程永不阻塞</strong>；</li></ul><blockquote><p>面试题：如何理解 JS 的异步？</p><p>参考答案：</p><p>JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。</p><p>而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。</p><p>如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。</p><p>所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。</p><p>在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。</p></blockquote><h2 id="线程与进程"><a href="#线程与进程" class="headerlink" title="线程与进程"></a>线程与进程</h2><h3 id="线程和进程是操作系统中的两个概念："><a href="#线程和进程是操作系统中的两个概念：" class="headerlink" title="线程和进程是操作系统中的两个概念："></a>线程和进程是操作系统中的两个概念：</h3><ul><li>进程（process）：计算机已经运行的程序（程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程）；</li><li>线程（thread）：操作系统能够运行运算调度的最小单位；</li></ul><h3 id="听起来很抽象，我们直观一点解释："><a href="#听起来很抽象，我们直观一点解释：" class="headerlink" title="听起来很抽象，我们直观一点解释："></a>听起来很抽象，我们直观一点解释：</h3><ul><li>进程：我们可以认为，启动一个应用程序，就会默认启动一个进程（每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意）；</li><li>线程：一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行程序的代码，该线程称之为主线程；</li><li>如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程；</li></ul><h3 id="再用一个形象的例子解释："><a href="#再用一个形象的例子解释：" class="headerlink" title="再用一个形象的例子解释："></a>再用一个形象的例子解释：</h3><ul><li>操作系统类似于一个工厂；</li><li>工厂中里有很多车间，这个车间就是进程；</li><li>每个车间可能有一个以上的工人在工厂，这个工人就是线程；</li></ul><h2 id="多进程多线程开发"><a href="#多进程多线程开发" class="headerlink" title="多进程多线程开发"></a>多进程多线程开发</h2><blockquote><p>操作系统是如何做到同时让多个进程（边听歌、边写代码、边查阅资料）同时工作呢？</p></blockquote><ul><li>这是因为CPU的运算速度非常快，它可以快速的在多个进程之间迅速的切换；</li><li>当我们的进程中的线程获取获取到时间片时，就可以快速执行我们编写的代码；</li><li>对于用于来说是感受不到这种快速的切换的；</li></ul><p><img src="https://img.fsllala.top/jincheng.png" alt="进程与线程"></p><h2 id="浏览器多进程"><a href="#浏览器多进程" class="headerlink" title="浏览器多进程"></a>浏览器多进程</h2><blockquote><p>浏览器内部工作极其复杂，为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。</p></blockquote><p>它主要包括以下进程：</p><ul><li><p>浏览器进程：浏览器的主进程，唯一，负责创建和销毁其它进程、浏览器界面的展示、用户交互，前进后退等。</p></li><li><p>GPU 进程：用于 3D 绘制等，最多一个。</p></li><li><p>网络进程：负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。</p></li><li><p>第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建。</p></li><li><p>浏览器渲染进程（浏览器内核）：渲染进程启动后，会开启一个<strong>渲染主线程</strong>，主线程负责执行 HTML、CSS、JS 代码。默认情况下，浏览器会为每个标签页（Tab页）开启一个新的渲染进程，以保证不同的标签页之间不相互影响。</p><ul><li><p>每个进程中又有很多的线程，其中包括执行JavaScript代码的线程；</p><blockquote><p>但是JavaScript的代码执行是在一个单独的线程中执行的；这就意味着JavaScript的代码，在同一个时刻只能做一件事；如果这件事是非常耗时的，就意味着当前的线程就会被阻塞；</p></blockquote></li></ul></li></ul><h2 id="宏任务与微任务"><a href="#宏任务与微任务" class="headerlink" title="宏任务与微任务"></a>宏任务与微任务</h2><p>宏任务是由宿主发起的，而微任务是由JS发起的。</p><table><thead><tr><th align="center">名称</th><th align="center">宏任务(macrotask)</th><th align="center">微任务(microtask)</th></tr></thead><tbody><tr><td align="center">谁发起的</td><td align="center">宿主(node、浏览器)</td><td align="center">JS引擎</td></tr><tr><td align="center">谁先运行</td><td align="center">后运行</td><td align="center">先运行</td></tr><tr><td align="center">会触发新一轮Tick吗</td><td align="center">会</td><td align="center">不会</td></tr></tbody></table><blockquote><p>事件循环中维护着两个队列</p></blockquote><ol><li>宏任务队列主要包括：</li></ol><ul><li>script(整体代码)  ps:可以理解为外层同步代码</li><li>ajax</li><li>setTimeout</li><li>setInterval</li><li>UI交互事件</li><li>I&#x2F;O（Node.js）</li><li>setImmediate(Node.js 环境)</li></ul><ol start="2"><li>微任务队列主要包括：</li></ol><ul><li>Promise的then回调</li><li>process.nextTick（Node.js）</li><li>Mutation Observer API</li><li>queueMicrotask()</li></ul><h2 id="宏任务与微任务是怎么执行的"><a href="#宏任务与微任务是怎么执行的" class="headerlink" title="宏任务与微任务是怎么执行的"></a>宏任务与微任务是怎么执行的</h2><ul><li><p>main script中的代码优先执行（编写的顶层script代码）；</p></li><li><p>在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行；</p></li><li><p>也就是宏任务执行之前，必须保证微任务队列是空的；</p></li><li><p>如果不为空，那么就优先执行微任务队列中的任务（回调）；</p></li><li><p>总结：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。（每次执行宏任务之前，都会在微任务队列里检查有没有微任务，有的话就先把微任务队列里执行完，然后再执行此个宏任务）</p></li></ul><p><img src="https://img.fsllala.top/1656842195916eventLoop1.png" alt="宏微任务"></p><h2 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h2><p>DEMO1：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;1&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve</span>)&#123;    </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;2&#x27;</span>);</span><br><span class="line"><span class="title function_">resolve</span>();</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;    </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;3&#x27;</span>);</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;4&#x27;</span>)</span><br><span class="line">&#125;); </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;5&#x27;</span>);</span><br><span class="line"><span class="comment">// 2 5 3 4 1</span></span><br></pre></td></tr></table></figure><p>分析：(其实先找同步的，然后再找微任务，再找宏任务比较快)  ps：看第2条</p><ol><li>遇到setTimout，异步宏任务，放入宏任务队列中</li><li>遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出2</li><li>而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中</li><li>遇到同步任务console.log(‘5’);输出5；主线程中同步任务执行完</li><li>从微任务队列中取出任务到主线程中，输出3、 4，微任务队列为空</li><li>从宏任务队列中取出任务到主线程中，输出1，宏任务队列为空</li></ol><p>DEMO2：</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span>&#123;</span><br><span class="line">  <span class="title function_">resolve</span>();</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;test&#x27;</span>);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">4</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">resolve</span>();</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>)</span><br><span class="line">&#125;).<span class="title function_">then</span>( <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span>);</span><br><span class="line">  <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;before timeout&#x27;</span>);</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;also before timeout&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span>);</span><br><span class="line"><span class="comment">//1 2 3 before timeout also before timeout 4 test</span></span><br></pre></td></tr></table></figure><p>分析：</p><ol><li>看到setTimeout，为宏任务，直接不用管了，往下找</li><li>看到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出1</li><li>而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中</li><li>遇到同步任务console.log(‘2’);输出2；主线程中同步任务执行完</li><li>微任务队列中取出任务到主线程中，输出3，此微任务中又有微任务，Promise.resolve().then(微任务a).then(微任务b)，将其依次放入微任务队列中</li><li>从微任务队列中取出任务a到主线程中，输出 before timeout；</li><li>从微任务队列中取出任务b到主线程中，任务b又注册了一个微任务c，放入微任务队列中；</li><li>从微任务队列中取出任务c到主线程中，输出 also before timeout；微任务队列为空</li><li>从宏任务队列中取出任务到主线程，此任务中注册了一个微任务d，将其放入微任务队列中，接下来遇到输出4，宏任务队列为空</li><li>从微任务队列中取出任务d到主线程 ，输出test，微任务队列为空</li></ol><p>DEMO3：</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;1&#x27;</span>);</span><br><span class="line"></span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;2&#x27;</span>);</span><br><span class="line">    process.<span class="title function_">nextTick</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;3&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve</span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;4&#x27;</span>);</span><br><span class="line">      <span class="title function_">resolve</span>();</span><br><span class="line">    &#125;).<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;5&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  process.<span class="title function_">nextTick</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;6&#x27;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;7&#x27;</span>);</span><br><span class="line">    <span class="title function_">resolve</span>();</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;8&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;9&#x27;</span>);</span><br><span class="line">    process.<span class="title function_">nextTick</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;10&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve</span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;11&#x27;</span>);</span><br><span class="line">      <span class="title function_">resolve</span>();</span><br><span class="line">    &#125;).<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;12&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">//1 7 6 8 2 4 3 5 9 11 10 12</span></span><br></pre></td></tr></table></figure><p>分析：(大白话版)</p><ol><li>同步任务直接输出 1</li><li>遇到setTimeout，加入宏任务队列(后执行的那种，整个函数就先不用看了)</li><li>process.nextTick，加入微任务队列</li><li>new Promise,new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出7</li><li>而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中</li><li>遇到setTimeout，加入宏任务队列(后执行的那种，整个函数就先不用看了)   主线程中同步任务执行完</li><li>找微任务，因为是栈，所以先入先出，所以从上往下找，process.nextTick 输出 6</li><li>new Promise.then  输出 8</li><li>找宏任务；在宏任务里面先找同步代码 输出 2 、4；然后找微任务：输出3、5</li><li>找宏任务；在宏任务里面先找同步代码 输出 9、11；然后找微任务：输出10、12</li></ol><p>DEMO4:</p><blockquote><p>async await是promise的语法糖</p></blockquote><ul><li>我们可以将await关键字后面执行的代码,看做是包裹在(resolve,reject)&#x3D;&gt;{函数执行}的代码；</li><li>await 的下一条语句,可以看做是then(res&#x3D;&gt;{函数执行})中的代码；</li></ul><p><img src="https://img.fsllala.top/asyncQuenen.png" alt="async执行"></p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">    <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">async1</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;async1 start&quot;</span>);</span><br><span class="line">        <span class="keyword">await</span> <span class="title function_">async2</span>();</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;async1 end&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">async2</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;async2&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;script start&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;setTimeout&quot;</span>);</span><br><span class="line">    &#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">async1</span>();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;promise1&quot;</span>);</span><br><span class="line">        <span class="title function_">resolve</span>();</span><br><span class="line">    &#125;).<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;promise2&quot;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;script end&quot;</span>);</span><br><span class="line"><span class="comment">//script start  async1 start  async2  promise1  script end  async1 end  promise2  setTimeout</span></span><br></pre></td></tr></table></figure><p>分析：</p><ol><li>遇到函数 async1，async2定义，不会执行，不用管；</li><li>同步任务：输出 “script start”</li><li>setTimeout，加入宏任务队列；</li><li>async1()调用，输出 “async1 start”；下一行：await async2();相当于promise里面的resolve包裹的代码,直接执行，输出”async2”；下一行 ：console.log(“async1 end”);相当于promise中的then，加入微任务队列；</li><li>输出”promise1”，resolve()调用.then中的代码,但是为微任务，加入微任务队列；</li><li>输出”script end”</li><li>在微任务队列中查找，不为空，依次执行队列：输出”async1 end”；输出”promise2”</li><li>在宏任务队列中查找，检查微任务队列是否为空，为空，执行此个宏任务，输出”setTimeout”</li></ol><h1 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h1><ul><li><a href="https://blog.csdn.net/NancyFyn/article/details/118407548?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~LandingCtr~Rate-1.queryctrv4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~LandingCtr~Rate-1.queryctrv4&utm_relevant_index=2">什么是宏任务、微任务？宏任务、微任务有哪些？又是怎么执行的？</a></li><li><a href="https://zhuanlan.zhihu.com/p/87684858">深入理解事件循环</a></li><li><a href="https://www.cnblogs.com/wangziye/p/9566454.html">JS宏任务和微任务</a></li></ul>]]></content>
       
       
       <categories>
@@ -884,7 +884,7 @@
       <link href="/articles/ef0a4464.html"/>
       <url>/articles/ef0a4464.html</url>
       
-        <content type="html"><![CDATA[<h1 id="拖拽"><a href="#拖拽" class="headerlink" title="拖拽"></a>拖拽</h1><h2 id="位置信息"><a href="#位置信息" class="headerlink" title="位置信息"></a>位置信息</h2><ul><li>clientX &#x2F; clientY       获取距离可视区域的距离；</li><li>pageX &#x2F; pageY        获取距离文档的（没有滚动条的时候与client一样）；</li><li>screenX &#x2F; screenY  获取距离屏幕 （指的电脑屏幕）；</li></ul><h2 id="拖拽涉及到的事件"><a href="#拖拽涉及到的事件" class="headerlink" title="拖拽涉及到的事件"></a>拖拽涉及到的事件</h2><ul><li>按下：onmousedown</li><li>移动：onmousemove</li><li>抬起：onmouseup</li></ul><h2 id="拖拽的实现"><a href="#拖拽的实现" class="headerlink" title="拖拽的实现"></a>拖拽的实现</h2><ol><li>找到一个固定值(不变的点)&#x3D;&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)。</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656848441915tz.png" alt="不变的坐标"></p><ol start="2"><li>获取拖拽后元素距离body的距离 (offset不行)</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656848491916tz2.png" alt="拖拽"></p><h2 id="第一版代码"><a href="#第一版代码" class="headerlink" title="第一版代码"></a>第一版代码</h2><figure class="highlight css"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line">    * &#123;</span><br><span class="line">        <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.box</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">        <span class="attribute">background-color</span>: red;</span><br><span class="line">        <span class="attribute">position</span>: absolute;</span><br><span class="line">        <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 拖拽一共三个状态 ：</span></span><br><span class="line"><span class="comment"> 1.按下：onmousedown</span></span><br><span class="line"><span class="comment"> 2.移动：onmousemove</span></span><br><span class="line"><span class="comment"> 3.抬起：onmouseup</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"><span class="comment">// 找到一个固定值(不变的点)=&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)</span></span><br><span class="line"><span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"><span class="comment">// 1.鼠标按下</span></span><br><span class="line">box.<span class="property">onmousedown</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">    <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">    ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">    <span class="comment">// 获取鼠标距离拖拽元素的距离</span></span><br><span class="line">    <span class="keyword">const</span> x = ev.<span class="property">clientX</span> - box.<span class="property">offsetLeft</span>;</span><br><span class="line">    <span class="keyword">const</span> y = ev.<span class="property">clientY</span> - box.<span class="property">offsetTop</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 2.鼠标移动事件  肯定在鼠标按下事件里面</span></span><br><span class="line">    box.<span class="property">onmousemove</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">        <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">        ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">        <span class="comment">// 确定box的位置</span></span><br><span class="line">        <span class="keyword">const</span> left = ev.<span class="property">clientX</span> - x;</span><br><span class="line">        <span class="keyword">const</span> top = ev.<span class="property">clientY</span> - y;</span><br><span class="line">        <span class="comment">// 设置(得设置绝对定位)</span></span><br><span class="line">        box.<span class="property">style</span>.<span class="property">left</span> = left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">        box.<span class="property">style</span>.<span class="property">top</span> = top + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//  3.鼠标抬起</span></span><br><span class="line">    box.<span class="property">onmouseup</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">// 移除鼠标的移动事件;  因为抬起了鼠标还可以移动</span></span><br><span class="line">        box.<span class="property">onmousemove</span> = <span class="literal">null</span>;</span><br><span class="line">        box.<span class="property">onmouseup</span> = <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><strong>bug：鼠标移动过快，鼠标可能会离开div(box)，进而到文档上。</strong></p><h2 id="第二版代码"><a href="#第二版代码" class="headerlink" title="第二版代码"></a>第二版代码</h2><p><strong>将鼠标移动和抬起的对象设置为了整个屏幕，别的未修改。</strong></p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 拖拽一共三个状态 ：</span></span><br><span class="line"><span class="comment"> 1.按下：onmousedown</span></span><br><span class="line"><span class="comment"> 2.移动：onmousemove</span></span><br><span class="line"><span class="comment"> 3.抬起：onmouseup</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"><span class="comment">// 找到一个固定值(不变的点)=&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)</span></span><br><span class="line"><span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"><span class="comment">// 1.鼠标按下</span></span><br><span class="line">box.<span class="property">onmousedown</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">    <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">    ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">    <span class="comment">// 获取鼠标距离拖拽元素的距离</span></span><br><span class="line">    <span class="keyword">const</span> x = ev.<span class="property">clientX</span> - box.<span class="property">offsetLeft</span>;</span><br><span class="line">    <span class="keyword">const</span> y = ev.<span class="property">clientY</span> - box.<span class="property">offsetTop</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 2.鼠标移动事件  肯定在鼠标按下事件里面</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">onmousemove</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">        <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">        ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">        <span class="comment">// 确定box的位置</span></span><br><span class="line">        <span class="keyword">const</span> left = ev.<span class="property">clientX</span> - x;</span><br><span class="line">        <span class="keyword">const</span> top = ev.<span class="property">clientY</span> - y;</span><br><span class="line">        <span class="comment">// 设置(得设置绝对定位)</span></span><br><span class="line">        box.<span class="property">style</span>.<span class="property">left</span> = left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">        box.<span class="property">style</span>.<span class="property">top</span> = top + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//  3.鼠标抬起</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">onmouseup</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">// 移除鼠标的移动事件;  因为抬起了鼠标还可以移动</span></span><br><span class="line">        <span class="variable language_">window</span>.<span class="property">onmousemove</span> = <span class="literal">null</span>;</span><br><span class="line">        <span class="variable language_">window</span>.<span class="property">onmouseup</span> = <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>如上代码也可以使用<code>getBoundingClientRect()</code>获取dom位置</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line"><span class="comment">// 获取元素的坐标</span></span><br><span class="line"><span class="keyword">const</span> boxLocation = box.<span class="title function_">getBoundingClientRect</span>();</span><br><span class="line"><span class="comment">// 获取鼠标距离拖拽元素的距离</span></span><br><span class="line"><span class="keyword">const</span> x = ev.<span class="property">clientX</span> - boxLocation.<span class="property">left</span>;</span><br><span class="line"><span class="keyword">const</span> y = ev.<span class="property">clientY</span> - boxLocation.<span class="property">top</span>;</span><br></pre></td></tr></table></figure><p><strong>bug：能超出屏幕范围。</strong></p><h2 id="第三版代码"><a href="#第三版代码" class="headerlink" title="第三版代码"></a>第三版代码</h2><p><strong>限制边界，别的未修改。</strong></p> <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 拖拽一共三个状态 ：</span></span><br><span class="line"><span class="comment"> 1.按下：onmousedown</span></span><br><span class="line"><span class="comment"> 2.移动：onmousemove</span></span><br><span class="line"><span class="comment"> 3.抬起：onmouseup</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"><span class="comment">// 找到一个固定值(不变的点)=&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)</span></span><br><span class="line"><span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"><span class="comment">// 1.鼠标按下</span></span><br><span class="line">box.<span class="property">onmousedown</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">    <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">    ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">    <span class="comment">// 获取元素的坐标</span></span><br><span class="line">    <span class="keyword">const</span> boxLocation = box.<span class="title function_">getBoundingClientRect</span>();</span><br><span class="line">    <span class="comment">// 获取鼠标距离拖拽元素的距离</span></span><br><span class="line">    <span class="keyword">const</span> x = ev.<span class="property">clientX</span> - boxLocation.<span class="property">left</span>;</span><br><span class="line">    <span class="keyword">const</span> y = ev.<span class="property">clientY</span> - boxLocation.<span class="property">top</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 边界限制(获取maxLeft,maxTop;视图宽/高-元素宽/高);</span></span><br><span class="line">    <span class="keyword">const</span> minLeft = <span class="number">0</span></span><br><span class="line">    <span class="keyword">const</span> minTop = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">const</span> maxLeft = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientWidth</span>-box.<span class="property">offsetWidth</span>;</span><br><span class="line">    <span class="keyword">const</span> maxTop = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>-box.<span class="property">offsetHeight</span>;</span><br><span class="line">    </span><br><span class="line"></span><br><span class="line">    <span class="comment">// 2.鼠标移动事件  肯定在鼠标按下事件里面</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">onmousemove</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">        <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">        ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">        <span class="comment">// 确定box的位置</span></span><br><span class="line">        <span class="keyword">let</span> left = ev.<span class="property">clientX</span> - x;</span><br><span class="line">        <span class="keyword">let</span> top = ev.<span class="property">clientY</span> - y;</span><br><span class="line">        <span class="comment">// 边界限制</span></span><br><span class="line">        <span class="keyword">if</span>(left&lt;minLeft)&#123;</span><br><span class="line">            left=minLeft</span><br><span class="line">        &#125;<span class="keyword">else</span> <span class="keyword">if</span>(left&gt;maxLeft)&#123;</span><br><span class="line">            left=maxLeft</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span>(top&lt;minTop)&#123;</span><br><span class="line">            top=minTop</span><br><span class="line">        &#125;<span class="keyword">else</span> <span class="keyword">if</span>(top&gt;maxTop)&#123;</span><br><span class="line">            top=maxTop</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// 设置(得设置绝对定位)</span></span><br><span class="line">        box.<span class="property">style</span>.<span class="property">left</span> = left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">        box.<span class="property">style</span>.<span class="property">top</span> = top + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//  3.鼠标抬起</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">onmouseup</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">// 移除鼠标的移动事件;  因为抬起了鼠标还可以移动</span></span><br><span class="line">        <span class="variable language_">window</span>.<span class="property">onmousemove</span> = <span class="literal">null</span>;</span><br><span class="line">        <span class="variable language_">window</span>.<span class="property">onmouseup</span> = <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><strong>bug：当div里面有图片或者文字的时候，会有默认行为。</strong></p><h2 id="最终代码"><a href="#最终代码" class="headerlink" title="最终代码"></a>最终代码</h2><p><strong>在鼠标按下里增加了阻止默认行为。</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 阻止默认行为</span></span><br><span class="line">ev.<span class="property">preventDafault</span>?ev.<span class="title function_">preventDafault</span>():ev.<span class="property">returnValue</span>=<span class="literal">false</span>;</span><br></pre></td></tr></table></figure><h2 id="拖拽自动回放"><a href="#拖拽自动回放" class="headerlink" title="拖拽自动回放"></a>拖拽自动回放</h2><p>设置一个数组用来存放坐标，每次通过pop()将末尾的值赋值给拖拽元素。</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">/*</span></span><br><span class="line"><span class="comment"> 拖拽一共三个状态 ：</span></span><br><span class="line"><span class="comment"> 1.按下：onmousedown</span></span><br><span class="line"><span class="comment"> 2.移动：onmousemove</span></span><br><span class="line"><span class="comment"> 3.抬起：onmouseup</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"> <span class="comment">// 找到一个固定值(不变的点)=&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)</span></span><br><span class="line"> <span class="keyword">var</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">var</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;btn&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 设置一个数组存数值;</span></span><br><span class="line"> <span class="keyword">var</span> stepArr = []</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 1.鼠标按下</span></span><br><span class="line"> box.<span class="property">onmousedown</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">     <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">     ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">     <span class="comment">//存放初始值</span></span><br><span class="line">     stepArr.<span class="title function_">push</span>(&#123;</span><br><span class="line">         <span class="attr">left</span>: <span class="built_in">parseFloat</span>(<span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(box).<span class="property">left</span>),</span><br><span class="line">         <span class="attr">top</span>: <span class="built_in">parseFloat</span>(<span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(box).<span class="property">top</span>)</span><br><span class="line">     &#125;)</span><br><span class="line">     <span class="comment">// 阻止默认行为</span></span><br><span class="line">     ev.<span class="property">preventDafault</span>?ev.<span class="title function_">preventDafault</span>():ev.<span class="property">returnValue</span>=<span class="literal">false</span>;</span><br><span class="line">     <span class="comment">// 获取鼠标距离拖拽元素的距离</span></span><br><span class="line">     <span class="keyword">var</span> x = ev.<span class="property">clientX</span> - box.<span class="property">offsetLeft</span>;</span><br><span class="line">     <span class="keyword">var</span> y = ev.<span class="property">clientY</span> - box.<span class="property">offsetTop</span>;</span><br><span class="line"></span><br><span class="line">     <span class="comment">// 2.鼠标移动事件  肯定在鼠标按下事件里面</span></span><br><span class="line">     <span class="variable language_">document</span>.<span class="property">onmousemove</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">         <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">         ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">         <span class="comment">// 确定box的位置</span></span><br><span class="line">         <span class="keyword">var</span> left = ev.<span class="property">clientX</span> - x;</span><br><span class="line">         <span class="keyword">var</span> top = ev.<span class="property">clientY</span> - y;</span><br><span class="line">         <span class="comment">// 边界判断</span></span><br><span class="line">         <span class="keyword">var</span> minLeft = <span class="number">0</span>,</span><br><span class="line">             maxLeft = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientWidth</span> - box.<span class="property">clientWidth</span>;</span><br><span class="line">         <span class="keyword">var</span> minTop = <span class="number">0</span>,</span><br><span class="line">             maxTop = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span> - box.<span class="property">clientHeight</span>;</span><br><span class="line">         <span class="keyword">if</span> (left &lt;= minLeft) &#123;</span><br><span class="line">             left = minLeft;</span><br><span class="line">         &#125; <span class="keyword">else</span> <span class="keyword">if</span> (left &gt;= maxLeft) &#123;</span><br><span class="line">             left = maxLeft;</span><br><span class="line">         &#125;</span><br><span class="line">         <span class="keyword">if</span> (top &lt;= minTop) &#123;</span><br><span class="line">             top = minTop;</span><br><span class="line">         &#125; <span class="keyword">else</span> <span class="keyword">if</span> (top &gt;= maxTop) &#123;</span><br><span class="line">             top = maxTop;</span><br><span class="line">         &#125;</span><br><span class="line">         <span class="comment">// 设置(得设置绝对定位)</span></span><br><span class="line">         box.<span class="property">style</span>.<span class="property">left</span> = left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">         box.<span class="property">style</span>.<span class="property">top</span> = top + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">         <span class="comment">// 添加移动的坐标</span></span><br><span class="line">         stepArr.<span class="title function_">push</span>(&#123; <span class="string">&quot;left&quot;</span>: left &#125;, &#123; <span class="string">&quot;top&quot;</span>: top &#125;)</span><br><span class="line">     &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">//  3.鼠标抬起(可以在鼠标按下里面,也可以不在里面)</span></span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">onmouseup</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">     <span class="comment">// 移除鼠标的移动事件;  因为抬起了鼠标还可以移动</span></span><br><span class="line">     <span class="variable language_">document</span>.<span class="property">onmousemove</span> = <span class="literal">null</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> btn.<span class="property">onclick</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">     <span class="comment">// 防止多次点击,先清除定时器</span></span><br><span class="line">     <span class="variable language_">window</span>.<span class="built_in">clearInterval</span>(<span class="variable language_">this</span>.<span class="property">timer</span>);</span><br><span class="line">     <span class="keyword">var</span> that = <span class="variable language_">this</span>;</span><br><span class="line">     <span class="comment">// 设置定时器(自定义属性)</span></span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">timer</span> = <span class="variable language_">window</span>.<span class="built_in">setInterval</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">         <span class="comment">// 拿取末尾的值;原来的数组会改变;</span></span><br><span class="line">         <span class="keyword">var</span> curStep = stepArr.<span class="title function_">pop</span>();</span><br><span class="line">         <span class="keyword">if</span> (stepArr.<span class="property">length</span> &lt;= <span class="number">0</span>) &#123;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">left</span> = curStep.<span class="property">left</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">top</span> = curStep.<span class="property">top</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">             <span class="comment">// 清除定时器</span></span><br><span class="line">             <span class="variable language_">window</span>.<span class="built_in">clearInterval</span>(that.<span class="property">timer</span>);</span><br><span class="line">         &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">left</span> = curStep.<span class="property">left</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">top</span> = curStep.<span class="property">top</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">         &#125;</span><br><span class="line">     &#125;, <span class="number">10</span>)</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>]]></content>
+        <content type="html"><![CDATA[<h1 id="拖拽"><a href="#拖拽" class="headerlink" title="拖拽"></a>拖拽</h1><h2 id="位置信息"><a href="#位置信息" class="headerlink" title="位置信息"></a>位置信息</h2><ul><li>clientX &#x2F; clientY       获取距离可视区域的距离；</li><li>pageX &#x2F; pageY        获取距离文档的（没有滚动条的时候与client一样）；</li><li>screenX &#x2F; screenY  获取距离屏幕 （指的电脑屏幕）；</li></ul><h2 id="拖拽涉及到的事件"><a href="#拖拽涉及到的事件" class="headerlink" title="拖拽涉及到的事件"></a>拖拽涉及到的事件</h2><ul><li>按下：onmousedown</li><li>移动：onmousemove</li><li>抬起：onmouseup</li></ul><h2 id="拖拽的实现"><a href="#拖拽的实现" class="headerlink" title="拖拽的实现"></a>拖拽的实现</h2><ol><li>找到一个固定值(不变的点)&#x3D;&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)。</li></ol><p><img src="https://img.fsllala.top/1656848441915tz.png" alt="不变的坐标"></p><ol start="2"><li>获取拖拽后元素距离body的距离 (offset不行)</li></ol><p><img src="https://img.fsllala.top/1656848491916tz2.png" alt="拖拽"></p><h2 id="第一版代码"><a href="#第一版代码" class="headerlink" title="第一版代码"></a>第一版代码</h2><figure class="highlight css"><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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line">    * &#123;</span><br><span class="line">        <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.box</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">        <span class="attribute">background-color</span>: red;</span><br><span class="line">        <span class="attribute">position</span>: absolute;</span><br><span class="line">        <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 拖拽一共三个状态 ：</span></span><br><span class="line"><span class="comment"> 1.按下：onmousedown</span></span><br><span class="line"><span class="comment"> 2.移动：onmousemove</span></span><br><span class="line"><span class="comment"> 3.抬起：onmouseup</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"><span class="comment">// 找到一个固定值(不变的点)=&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)</span></span><br><span class="line"><span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"><span class="comment">// 1.鼠标按下</span></span><br><span class="line">box.<span class="property">onmousedown</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">    <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">    ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">    <span class="comment">// 获取鼠标距离拖拽元素的距离</span></span><br><span class="line">    <span class="keyword">const</span> x = ev.<span class="property">clientX</span> - box.<span class="property">offsetLeft</span>;</span><br><span class="line">    <span class="keyword">const</span> y = ev.<span class="property">clientY</span> - box.<span class="property">offsetTop</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 2.鼠标移动事件  肯定在鼠标按下事件里面</span></span><br><span class="line">    box.<span class="property">onmousemove</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">        <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">        ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">        <span class="comment">// 确定box的位置</span></span><br><span class="line">        <span class="keyword">const</span> left = ev.<span class="property">clientX</span> - x;</span><br><span class="line">        <span class="keyword">const</span> top = ev.<span class="property">clientY</span> - y;</span><br><span class="line">        <span class="comment">// 设置(得设置绝对定位)</span></span><br><span class="line">        box.<span class="property">style</span>.<span class="property">left</span> = left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">        box.<span class="property">style</span>.<span class="property">top</span> = top + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//  3.鼠标抬起</span></span><br><span class="line">    box.<span class="property">onmouseup</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">// 移除鼠标的移动事件;  因为抬起了鼠标还可以移动</span></span><br><span class="line">        box.<span class="property">onmousemove</span> = <span class="literal">null</span>;</span><br><span class="line">        box.<span class="property">onmouseup</span> = <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><strong>bug：鼠标移动过快，鼠标可能会离开div(box)，进而到文档上。</strong></p><h2 id="第二版代码"><a href="#第二版代码" class="headerlink" title="第二版代码"></a>第二版代码</h2><p><strong>将鼠标移动和抬起的对象设置为了整个屏幕，别的未修改。</strong></p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 拖拽一共三个状态 ：</span></span><br><span class="line"><span class="comment"> 1.按下：onmousedown</span></span><br><span class="line"><span class="comment"> 2.移动：onmousemove</span></span><br><span class="line"><span class="comment"> 3.抬起：onmouseup</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"><span class="comment">// 找到一个固定值(不变的点)=&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)</span></span><br><span class="line"><span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"><span class="comment">// 1.鼠标按下</span></span><br><span class="line">box.<span class="property">onmousedown</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">    <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">    ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">    <span class="comment">// 获取鼠标距离拖拽元素的距离</span></span><br><span class="line">    <span class="keyword">const</span> x = ev.<span class="property">clientX</span> - box.<span class="property">offsetLeft</span>;</span><br><span class="line">    <span class="keyword">const</span> y = ev.<span class="property">clientY</span> - box.<span class="property">offsetTop</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 2.鼠标移动事件  肯定在鼠标按下事件里面</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">onmousemove</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">        <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">        ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">        <span class="comment">// 确定box的位置</span></span><br><span class="line">        <span class="keyword">const</span> left = ev.<span class="property">clientX</span> - x;</span><br><span class="line">        <span class="keyword">const</span> top = ev.<span class="property">clientY</span> - y;</span><br><span class="line">        <span class="comment">// 设置(得设置绝对定位)</span></span><br><span class="line">        box.<span class="property">style</span>.<span class="property">left</span> = left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">        box.<span class="property">style</span>.<span class="property">top</span> = top + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//  3.鼠标抬起</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">onmouseup</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">// 移除鼠标的移动事件;  因为抬起了鼠标还可以移动</span></span><br><span class="line">        <span class="variable language_">window</span>.<span class="property">onmousemove</span> = <span class="literal">null</span>;</span><br><span class="line">        <span class="variable language_">window</span>.<span class="property">onmouseup</span> = <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>如上代码也可以使用<code>getBoundingClientRect()</code>获取dom位置</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line"><span class="comment">// 获取元素的坐标</span></span><br><span class="line"><span class="keyword">const</span> boxLocation = box.<span class="title function_">getBoundingClientRect</span>();</span><br><span class="line"><span class="comment">// 获取鼠标距离拖拽元素的距离</span></span><br><span class="line"><span class="keyword">const</span> x = ev.<span class="property">clientX</span> - boxLocation.<span class="property">left</span>;</span><br><span class="line"><span class="keyword">const</span> y = ev.<span class="property">clientY</span> - boxLocation.<span class="property">top</span>;</span><br></pre></td></tr></table></figure><p><strong>bug：能超出屏幕范围。</strong></p><h2 id="第三版代码"><a href="#第三版代码" class="headerlink" title="第三版代码"></a>第三版代码</h2><p><strong>限制边界，别的未修改。</strong></p> <figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 拖拽一共三个状态 ：</span></span><br><span class="line"><span class="comment"> 1.按下：onmousedown</span></span><br><span class="line"><span class="comment"> 2.移动：onmousemove</span></span><br><span class="line"><span class="comment"> 3.抬起：onmouseup</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"><span class="comment">// 找到一个固定值(不变的点)=&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)</span></span><br><span class="line"><span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"><span class="comment">// 1.鼠标按下</span></span><br><span class="line">box.<span class="property">onmousedown</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">    <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">    ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">    <span class="comment">// 获取元素的坐标</span></span><br><span class="line">    <span class="keyword">const</span> boxLocation = box.<span class="title function_">getBoundingClientRect</span>();</span><br><span class="line">    <span class="comment">// 获取鼠标距离拖拽元素的距离</span></span><br><span class="line">    <span class="keyword">const</span> x = ev.<span class="property">clientX</span> - boxLocation.<span class="property">left</span>;</span><br><span class="line">    <span class="keyword">const</span> y = ev.<span class="property">clientY</span> - boxLocation.<span class="property">top</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 边界限制(获取maxLeft,maxTop;视图宽/高-元素宽/高);</span></span><br><span class="line">    <span class="keyword">const</span> minLeft = <span class="number">0</span></span><br><span class="line">    <span class="keyword">const</span> minTop = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">const</span> maxLeft = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientWidth</span>-box.<span class="property">offsetWidth</span>;</span><br><span class="line">    <span class="keyword">const</span> maxTop = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>-box.<span class="property">offsetHeight</span>;</span><br><span class="line">    </span><br><span class="line"></span><br><span class="line">    <span class="comment">// 2.鼠标移动事件  肯定在鼠标按下事件里面</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">onmousemove</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">        <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">        ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">        <span class="comment">// 确定box的位置</span></span><br><span class="line">        <span class="keyword">let</span> left = ev.<span class="property">clientX</span> - x;</span><br><span class="line">        <span class="keyword">let</span> top = ev.<span class="property">clientY</span> - y;</span><br><span class="line">        <span class="comment">// 边界限制</span></span><br><span class="line">        <span class="keyword">if</span>(left&lt;minLeft)&#123;</span><br><span class="line">            left=minLeft</span><br><span class="line">        &#125;<span class="keyword">else</span> <span class="keyword">if</span>(left&gt;maxLeft)&#123;</span><br><span class="line">            left=maxLeft</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span>(top&lt;minTop)&#123;</span><br><span class="line">            top=minTop</span><br><span class="line">        &#125;<span class="keyword">else</span> <span class="keyword">if</span>(top&gt;maxTop)&#123;</span><br><span class="line">            top=maxTop</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// 设置(得设置绝对定位)</span></span><br><span class="line">        box.<span class="property">style</span>.<span class="property">left</span> = left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">        box.<span class="property">style</span>.<span class="property">top</span> = top + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//  3.鼠标抬起</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">onmouseup</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">// 移除鼠标的移动事件;  因为抬起了鼠标还可以移动</span></span><br><span class="line">        <span class="variable language_">window</span>.<span class="property">onmousemove</span> = <span class="literal">null</span>;</span><br><span class="line">        <span class="variable language_">window</span>.<span class="property">onmouseup</span> = <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><strong>bug：当div里面有图片或者文字的时候，会有默认行为。</strong></p><h2 id="最终代码"><a href="#最终代码" class="headerlink" title="最终代码"></a>最终代码</h2><p><strong>在鼠标按下里增加了阻止默认行为。</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 阻止默认行为</span></span><br><span class="line">ev.<span class="property">preventDafault</span>?ev.<span class="title function_">preventDafault</span>():ev.<span class="property">returnValue</span>=<span class="literal">false</span>;</span><br></pre></td></tr></table></figure><h2 id="拖拽自动回放"><a href="#拖拽自动回放" class="headerlink" title="拖拽自动回放"></a>拖拽自动回放</h2><p>设置一个数组用来存放坐标，每次通过pop()将末尾的值赋值给拖拽元素。</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">/*</span></span><br><span class="line"><span class="comment"> 拖拽一共三个状态 ：</span></span><br><span class="line"><span class="comment"> 1.按下：onmousedown</span></span><br><span class="line"><span class="comment"> 2.移动：onmousemove</span></span><br><span class="line"><span class="comment"> 3.抬起：onmouseup</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"> <span class="comment">// 找到一个固定值(不变的点)=&gt;鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)</span></span><br><span class="line"> <span class="keyword">var</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">var</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;btn&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 设置一个数组存数值;</span></span><br><span class="line"> <span class="keyword">var</span> stepArr = []</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 1.鼠标按下</span></span><br><span class="line"> box.<span class="property">onmousedown</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">     <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">     ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">     <span class="comment">//存放初始值</span></span><br><span class="line">     stepArr.<span class="title function_">push</span>(&#123;</span><br><span class="line">         <span class="attr">left</span>: <span class="built_in">parseFloat</span>(<span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(box).<span class="property">left</span>),</span><br><span class="line">         <span class="attr">top</span>: <span class="built_in">parseFloat</span>(<span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(box).<span class="property">top</span>)</span><br><span class="line">     &#125;)</span><br><span class="line">     <span class="comment">// 阻止默认行为</span></span><br><span class="line">     ev.<span class="property">preventDafault</span>?ev.<span class="title function_">preventDafault</span>():ev.<span class="property">returnValue</span>=<span class="literal">false</span>;</span><br><span class="line">     <span class="comment">// 获取鼠标距离拖拽元素的距离</span></span><br><span class="line">     <span class="keyword">var</span> x = ev.<span class="property">clientX</span> - box.<span class="property">offsetLeft</span>;</span><br><span class="line">     <span class="keyword">var</span> y = ev.<span class="property">clientY</span> - box.<span class="property">offsetTop</span>;</span><br><span class="line"></span><br><span class="line">     <span class="comment">// 2.鼠标移动事件  肯定在鼠标按下事件里面</span></span><br><span class="line">     <span class="variable language_">document</span>.<span class="property">onmousemove</span> = <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">         <span class="comment">// 事件对象的兼容性处理</span></span><br><span class="line">         ev = ev || <span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">         <span class="comment">// 确定box的位置</span></span><br><span class="line">         <span class="keyword">var</span> left = ev.<span class="property">clientX</span> - x;</span><br><span class="line">         <span class="keyword">var</span> top = ev.<span class="property">clientY</span> - y;</span><br><span class="line">         <span class="comment">// 边界判断</span></span><br><span class="line">         <span class="keyword">var</span> minLeft = <span class="number">0</span>,</span><br><span class="line">             maxLeft = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientWidth</span> - box.<span class="property">clientWidth</span>;</span><br><span class="line">         <span class="keyword">var</span> minTop = <span class="number">0</span>,</span><br><span class="line">             maxTop = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span> - box.<span class="property">clientHeight</span>;</span><br><span class="line">         <span class="keyword">if</span> (left &lt;= minLeft) &#123;</span><br><span class="line">             left = minLeft;</span><br><span class="line">         &#125; <span class="keyword">else</span> <span class="keyword">if</span> (left &gt;= maxLeft) &#123;</span><br><span class="line">             left = maxLeft;</span><br><span class="line">         &#125;</span><br><span class="line">         <span class="keyword">if</span> (top &lt;= minTop) &#123;</span><br><span class="line">             top = minTop;</span><br><span class="line">         &#125; <span class="keyword">else</span> <span class="keyword">if</span> (top &gt;= maxTop) &#123;</span><br><span class="line">             top = maxTop;</span><br><span class="line">         &#125;</span><br><span class="line">         <span class="comment">// 设置(得设置绝对定位)</span></span><br><span class="line">         box.<span class="property">style</span>.<span class="property">left</span> = left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">         box.<span class="property">style</span>.<span class="property">top</span> = top + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">         <span class="comment">// 添加移动的坐标</span></span><br><span class="line">         stepArr.<span class="title function_">push</span>(&#123; <span class="string">&quot;left&quot;</span>: left &#125;, &#123; <span class="string">&quot;top&quot;</span>: top &#125;)</span><br><span class="line">     &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">//  3.鼠标抬起(可以在鼠标按下里面,也可以不在里面)</span></span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">onmouseup</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">     <span class="comment">// 移除鼠标的移动事件;  因为抬起了鼠标还可以移动</span></span><br><span class="line">     <span class="variable language_">document</span>.<span class="property">onmousemove</span> = <span class="literal">null</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> btn.<span class="property">onclick</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">     <span class="comment">// 防止多次点击,先清除定时器</span></span><br><span class="line">     <span class="variable language_">window</span>.<span class="built_in">clearInterval</span>(<span class="variable language_">this</span>.<span class="property">timer</span>);</span><br><span class="line">     <span class="keyword">var</span> that = <span class="variable language_">this</span>;</span><br><span class="line">     <span class="comment">// 设置定时器(自定义属性)</span></span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">timer</span> = <span class="variable language_">window</span>.<span class="built_in">setInterval</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">         <span class="comment">// 拿取末尾的值;原来的数组会改变;</span></span><br><span class="line">         <span class="keyword">var</span> curStep = stepArr.<span class="title function_">pop</span>();</span><br><span class="line">         <span class="keyword">if</span> (stepArr.<span class="property">length</span> &lt;= <span class="number">0</span>) &#123;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">left</span> = curStep.<span class="property">left</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">top</span> = curStep.<span class="property">top</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">             <span class="comment">// 清除定时器</span></span><br><span class="line">             <span class="variable language_">window</span>.<span class="built_in">clearInterval</span>(that.<span class="property">timer</span>);</span><br><span class="line">         &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">left</span> = curStep.<span class="property">left</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">             box.<span class="property">style</span>.<span class="property">top</span> = curStep.<span class="property">top</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">         &#125;</span><br><span class="line">     &#125;, <span class="number">10</span>)</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>]]></content>
       
       
       <categories>
@@ -938,7 +938,7 @@
       <link href="/articles/16b55383.html"/>
       <url>/articles/16b55383.html</url>
       
-        <content type="html"><![CDATA[<h1 id="浏览器"><a href="#浏览器" class="headerlink" title="浏览器"></a>浏览器</h1><ul><li>整个屏幕的尺寸：<code>window.screen.width/height</code>；</li><li>浏览器的尺寸：<code>window.outerWidth/outerHeight</code>；</li><li>浏览器内部尺寸(包括滚定条)：<code>window.innerWidth/innerHeight</code>；</li><li>视口尺寸(不包括滚动条)：<code>document.documentElement.clientWidth/clientHeight</code>；</li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/BOM1700455005.jpg" alt="BOM"></p><h1 id="单个元素"><a href="#单个元素" class="headerlink" title="单个元素"></a>单个元素</h1><h2 id="client系列"><a href="#client系列" class="headerlink" title="client系列"></a>client系列</h2><ul><li>clientWidth：元素自身的宽度+左右填充；<code>width + padding-left + padding-right</code></li><li>clientHeight：元素自身的高度+上下填充；<code>height + padding-top + padding-bottom</code></li><li>clientLeft：元素对象的左边框；<code>border-left</code></li><li>clientTop：元素对象的上边框；<code>border-top</code></li></ul><h2 id="offset系列"><a href="#offset系列" class="headerlink" title="offset系列"></a>offset系列</h2><ul><li>offsetWidth：clientWidth+左右边框；<code>clientWidth + border-left + border-right+滚动条(如果有)</code></li><li>offsetHeight：clientHeight+上下边框；<code>clientHeight + border-top + border-bottom+滚动条(如果有)</code></li></ul><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/offsetWidth120180816173539646.png" alt="offsetWidth"></p><ul><li><p>offsetParent：取已经定位的父集元素，没有已经定位的父集元素，就是获取body；</p></li><li><p>offsetLeft&#x2F;offsetTop：在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。现分以下几种情况说明：</p><ol><li>在父元素均不设置position属性时，在Chrome，opera和IE浏览器中offsetLeft是元素边框外侧到浏览器窗口内侧的距离：</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/offsetLeft120180816171816115.png" alt="offsetLeft"></p><ol start="2"><li><p>当父元素设置position元素时又分为两种情况：</p><ol><li>如果父元素是body且body设置了position属性，在Chrome和opera浏览器中offsetLeft是元素边框外侧到body边框外侧的距离</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/offsetLeft220180816172015337.png" alt="offsetLeft"></p><ol start="2"><li>如果父元素不是body元素且设置了position属性时，offsetLeft为元素边框外侧到父元素边框内侧的距离（各浏览器情况一致）。</li></ol><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/offsetLeft320180816172126830.png" alt="offsetLeft"></p></li></ol></li></ul><h2 id="scroll系列"><a href="#scroll系列" class="headerlink" title="scroll系列"></a>scroll系列</h2><ul><li>内容没有溢出 相当于clientWidth &#x2F; clientHeight</li><li>内容溢出： (得到的值是一个约等于的值，而且不同浏览器有一定的差异，因为对字体，行高等渲染的机制不一样)<ul><li>scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。</li><li>scrollHeight：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。</li></ul></li><li>scrollLeft &#x2F; scrollTop：滚动条卷去 相当于页面被卷去的</li></ul><h2 id="元素位置"><a href="#元素位置" class="headerlink" title="元素位置"></a>元素位置</h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect">Element.getBoundingClientRect()</a>返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。</p><h2 id="Tips："><a href="#Tips：" class="headerlink" title="Tips："></a>Tips：</h2><ol><li>js获取body&#x3D;&gt;document.body；</li><li>js获取html&#x3D;&gt;document.documentElement；</li><li>有h5的声明body不兼容;没有h5的声明html不兼容；</li><li>声明了文档类型就用html 没有声明文档类型就用body；</li></ol><figure class="highlight js"><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"><span class="comment">// 兼容处理</span></span><br><span class="line"><span class="keyword">var</span> scrollT = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollTop</span>;</span><br><span class="line"><span class="keyword">var</span> scrollL = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollLeft</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollLeft</span>;</span><br></pre></td></tr></table></figure><h2 id="判断滚动条滚到页面底部"><a href="#判断滚动条滚到页面底部" class="headerlink" title="判断滚动条滚到页面底部"></a>判断滚动条滚到页面底部</h2><blockquote><p>需要了解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。</p></blockquote><ol><li><p>clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。</p></li><li><p>offsetHeight：是指元素内容的高度。依照上面的，那这个高度呢就是DIV内部的高度，包括可见部分及以滚动条下面的不可见部分。</p></li><li><p>scrollTop：这个是什么呢？他可以理解为滚动条可以滚动的长度。</p></li></ol><blockquote><p>举例，如果一个DIV高度是400px（即clientHeight为400），而里面的内容是一个很长的列表，内容的高度是1000px（即offsetHeight为1000）。那么，可见部分我们看到400px，1000px的内容中还有600px不可见。而这不可见的部分呢，正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动，此时scrollTop为0，如果你把滚动条拉到底，显示出列表最下面的部分，此时，scrollTop为600。　所以scrollTop的取值区间为[0, 600]。　所以这个600可以理解为滚动条可以滚动的长度。</p></blockquote><p>理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。</p><blockquote><p>首先，我们拉动滚动条，从最上面拉到最下面，变化的是scrollTop的值，而这个值是有一个区间的。<br>这个区间是： [0, (offsetHeight - clientHeight)]</p></blockquote><p>即，滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。</p><ul><li>判断滚动条滚动到最底端：<code> scrollTop == (offsetHeight – clientHeight)</code></li><li>在滚动条距离底端50px以内：<code> (offsetHeight – clientHeight) – scrollTop &lt;= 50</code></li><li>在滚动条距离底端5%以内：<code> scrollTop / (offsetHeight – clientHeight) &gt;= 0.95</code></li></ul><h2 id="文章阅读进度"><a href="#文章阅读进度" class="headerlink" title="文章阅读进度"></a>文章阅读进度</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="property">documentElement</span>;</span><br><span class="line"><span class="variable language_">window</span>.<span class="property">onscroll</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> clientHeight = box.<span class="property">clientHeight</span>;</span><br><span class="line">    <span class="keyword">const</span> offsetHeight = box.<span class="property">offsetHeight</span>;</span><br><span class="line">    <span class="keyword">const</span> scrollTop = box.<span class="property">scrollTop</span>;</span><br><span class="line">    <span class="keyword">const</span> percent = <span class="string">`<span class="subst">$&#123;<span class="built_in">Math</span>.round(scrollTop / (offsetHeight - clientHeight) * <span class="number">100</span>)&#125;</span>%`</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(percent);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="获取首屏的宽度-x2F-高度"><a href="#获取首屏的宽度-x2F-高度" class="headerlink" title="获取首屏的宽度&#x2F;高度"></a>获取首屏的宽度&#x2F;高度</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明了文档类型就用html 没有声明文档类型就用body</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取首屏或者是可视区域的宽度或高度</span></span><br><span class="line"><span class="comment">// var winW = document.body.clientWidth;</span></span><br><span class="line"><span class="comment">// var winH = document.body.clientHeight;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> winW = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientWidth</span>;</span><br><span class="line"><span class="keyword">var</span> winH = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>;</span><br></pre></td></tr></table></figure><h2 id="回到顶部"><a href="#回到顶部" class="headerlink" title="回到顶部"></a>回到顶部</h2><figure class="highlight js"><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"><span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span>=<span class="number">0</span>;</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="title function_">scroll</span>(<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">scroll</span>(<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line"><span class="comment">//scroll(x,y)与scrollTo(x,y)是一样一样的;</span></span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://blog.csdn.net/willard_cui/article/details/81712989">offsetWidth与offsetLeft</a></p><p><a href="https://www.jb51.net/article/58688.htm">JS实现判断滚动条滚到页面底部并执行事件的方法</a></p><p><a href="https://blog.csdn.net/qq_41800366/article/details/85995432">JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解</a></p>]]></content>
+        <content type="html"><![CDATA[<h1 id="浏览器"><a href="#浏览器" class="headerlink" title="浏览器"></a>浏览器</h1><ul><li>整个屏幕的尺寸：<code>window.screen.width/height</code>；</li><li>浏览器的尺寸：<code>window.outerWidth/outerHeight</code>；</li><li>浏览器内部尺寸(包括滚定条)：<code>window.innerWidth/innerHeight</code>；</li><li>视口尺寸(不包括滚动条)：<code>document.documentElement.clientWidth/clientHeight</code>；</li></ul><p><img src="https://img.fsllala.top/BOM1700455005.jpg" alt="BOM"></p><h1 id="单个元素"><a href="#单个元素" class="headerlink" title="单个元素"></a>单个元素</h1><h2 id="client系列"><a href="#client系列" class="headerlink" title="client系列"></a>client系列</h2><ul><li>clientWidth：元素自身的宽度+左右填充；<code>width + padding-left + padding-right</code></li><li>clientHeight：元素自身的高度+上下填充；<code>height + padding-top + padding-bottom</code></li><li>clientLeft：元素对象的左边框；<code>border-left</code></li><li>clientTop：元素对象的上边框；<code>border-top</code></li></ul><h2 id="offset系列"><a href="#offset系列" class="headerlink" title="offset系列"></a>offset系列</h2><ul><li>offsetWidth：clientWidth+左右边框；<code>clientWidth + border-left + border-right+滚动条(如果有)</code></li><li>offsetHeight：clientHeight+上下边框；<code>clientHeight + border-top + border-bottom+滚动条(如果有)</code></li></ul><p><img src="https://img.fsllala.top/offsetWidth120180816173539646.png" alt="offsetWidth"></p><ul><li><p>offsetParent：取已经定位的父集元素，没有已经定位的父集元素，就是获取body；</p></li><li><p>offsetLeft&#x2F;offsetTop：在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。现分以下几种情况说明：</p><ol><li>在父元素均不设置position属性时，在Chrome，opera和IE浏览器中offsetLeft是元素边框外侧到浏览器窗口内侧的距离：</li></ol><p><img src="https://img.fsllala.top/offsetLeft120180816171816115.png" alt="offsetLeft"></p><ol start="2"><li><p>当父元素设置position元素时又分为两种情况：</p><ol><li>如果父元素是body且body设置了position属性，在Chrome和opera浏览器中offsetLeft是元素边框外侧到body边框外侧的距离</li></ol><p><img src="https://img.fsllala.top/offsetLeft220180816172015337.png" alt="offsetLeft"></p><ol start="2"><li>如果父元素不是body元素且设置了position属性时，offsetLeft为元素边框外侧到父元素边框内侧的距离（各浏览器情况一致）。</li></ol><p><img src="https://img.fsllala.top/offsetLeft320180816172126830.png" alt="offsetLeft"></p></li></ol></li></ul><h2 id="scroll系列"><a href="#scroll系列" class="headerlink" title="scroll系列"></a>scroll系列</h2><ul><li>内容没有溢出 相当于clientWidth &#x2F; clientHeight</li><li>内容溢出： (得到的值是一个约等于的值，而且不同浏览器有一定的差异，因为对字体，行高等渲染的机制不一样)<ul><li>scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。</li><li>scrollHeight：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。</li></ul></li><li>scrollLeft &#x2F; scrollTop：滚动条卷去 相当于页面被卷去的</li></ul><h2 id="元素位置"><a href="#元素位置" class="headerlink" title="元素位置"></a>元素位置</h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect">Element.getBoundingClientRect()</a>返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。</p><h2 id="Tips："><a href="#Tips：" class="headerlink" title="Tips："></a>Tips：</h2><ol><li>js获取body&#x3D;&gt;document.body；</li><li>js获取html&#x3D;&gt;document.documentElement；</li><li>有h5的声明body不兼容;没有h5的声明html不兼容；</li><li>声明了文档类型就用html 没有声明文档类型就用body；</li></ol><figure class="highlight js"><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"><span class="comment">// 兼容处理</span></span><br><span class="line"><span class="keyword">var</span> scrollT = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollTop</span>;</span><br><span class="line"><span class="keyword">var</span> scrollL = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollLeft</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollLeft</span>;</span><br></pre></td></tr></table></figure><h2 id="判断滚动条滚到页面底部"><a href="#判断滚动条滚到页面底部" class="headerlink" title="判断滚动条滚到页面底部"></a>判断滚动条滚到页面底部</h2><blockquote><p>需要了解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。</p></blockquote><ol><li><p>clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。</p></li><li><p>offsetHeight：是指元素内容的高度。依照上面的，那这个高度呢就是DIV内部的高度，包括可见部分及以滚动条下面的不可见部分。</p></li><li><p>scrollTop：这个是什么呢？他可以理解为滚动条可以滚动的长度。</p></li></ol><blockquote><p>举例，如果一个DIV高度是400px（即clientHeight为400），而里面的内容是一个很长的列表，内容的高度是1000px（即offsetHeight为1000）。那么，可见部分我们看到400px，1000px的内容中还有600px不可见。而这不可见的部分呢，正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动，此时scrollTop为0，如果你把滚动条拉到底，显示出列表最下面的部分，此时，scrollTop为600。　所以scrollTop的取值区间为[0, 600]。　所以这个600可以理解为滚动条可以滚动的长度。</p></blockquote><p>理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。</p><blockquote><p>首先，我们拉动滚动条，从最上面拉到最下面，变化的是scrollTop的值，而这个值是有一个区间的。<br>这个区间是： [0, (offsetHeight - clientHeight)]</p></blockquote><p>即，滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。</p><ul><li>判断滚动条滚动到最底端：<code> scrollTop == (offsetHeight – clientHeight)</code></li><li>在滚动条距离底端50px以内：<code> (offsetHeight – clientHeight) – scrollTop &lt;= 50</code></li><li>在滚动条距离底端5%以内：<code> scrollTop / (offsetHeight – clientHeight) &gt;= 0.95</code></li></ul><h2 id="文章阅读进度"><a href="#文章阅读进度" class="headerlink" title="文章阅读进度"></a>文章阅读进度</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="property">documentElement</span>;</span><br><span class="line"><span class="variable language_">window</span>.<span class="property">onscroll</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> clientHeight = box.<span class="property">clientHeight</span>;</span><br><span class="line">    <span class="keyword">const</span> offsetHeight = box.<span class="property">offsetHeight</span>;</span><br><span class="line">    <span class="keyword">const</span> scrollTop = box.<span class="property">scrollTop</span>;</span><br><span class="line">    <span class="keyword">const</span> percent = <span class="string">`<span class="subst">$&#123;<span class="built_in">Math</span>.round(scrollTop / (offsetHeight - clientHeight) * <span class="number">100</span>)&#125;</span>%`</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(percent);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="获取首屏的宽度-x2F-高度"><a href="#获取首屏的宽度-x2F-高度" class="headerlink" title="获取首屏的宽度&#x2F;高度"></a>获取首屏的宽度&#x2F;高度</h2><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明了文档类型就用html 没有声明文档类型就用body</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取首屏或者是可视区域的宽度或高度</span></span><br><span class="line"><span class="comment">// var winW = document.body.clientWidth;</span></span><br><span class="line"><span class="comment">// var winH = document.body.clientHeight;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> winW = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientWidth</span>;</span><br><span class="line"><span class="keyword">var</span> winH = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>;</span><br></pre></td></tr></table></figure><h2 id="回到顶部"><a href="#回到顶部" class="headerlink" title="回到顶部"></a>回到顶部</h2><figure class="highlight js"><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"><span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span>=<span class="number">0</span>;</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="title function_">scroll</span>(<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">scroll</span>(<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line"><span class="comment">//scroll(x,y)与scrollTo(x,y)是一样一样的;</span></span><br></pre></td></tr></table></figure><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p><a href="https://blog.csdn.net/willard_cui/article/details/81712989">offsetWidth与offsetLeft</a></p><p><a href="https://www.jb51.net/article/58688.htm">JS实现判断滚动条滚到页面底部并执行事件的方法</a></p><p><a href="https://blog.csdn.net/qq_41800366/article/details/85995432">JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解</a></p>]]></content>
       
       
       <categories>
@@ -965,7 +965,7 @@
       <link href="/articles/59b49683.html"/>
       <url>/articles/59b49683.html</url>
       
-        <content type="html"><![CDATA[<h1 id="Dom"><a href="#Dom" class="headerlink" title="Dom"></a>Dom</h1><p>文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口(API)。 (DOM就是用来处理HTML机构)。</p><h2 id="节点"><a href="#节点" class="headerlink" title="节点"></a>节点</h2><p>加载HTML页面时，web浏览器生成一个树型结构，用来表示页面内部结构，称之为DOM树，DOM将这种树型结构理解为由节点组成。</p><h3 id="节点属性"><a href="#节点属性" class="headerlink" title="节点属性"></a>节点属性</h3><table><thead><tr><th>nodeType（节点类型）</th><th>nodeName（节点名称）</th><th>nodeValue（节点值）</th></tr></thead><tbody><tr><td>1（元素节点）</td><td>大写的标签名</td><td>null</td></tr><tr><td>3（文本节点）</td><td>#text</td><td>文本内容</td></tr><tr><td>8（注释节点）</td><td>#comment</td><td>注释内容</td></tr><tr><td>9（文档节点）</td><td>#document</td><td>null</td></tr></tbody></table><h3 id="获取子节点"><a href="#获取子节点" class="headerlink" title="获取子节点"></a>获取子节点</h3><p><strong>Tip：是属性，不是方法。</strong></p><ul><li>父亲节点.children; 获取<strong>直接元素</strong>子节点。注：即nodeType&#x3D;&#x3D;1的元素节点。</li><li>父亲节点.childNodes; 获取<strong>直接</strong>子节点 (和结构相关结构边了这个集合也会改变：比如去掉空格或者换行就相当于去掉了文本节点text)。</li><li>获取子节点，获取到了就是一个类数组集合，获取不到就是空集合。</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">&quot;ul1&quot;</span>&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">&lt;/ul&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> oUl = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;ul1&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> olis = oUl.<span class="property">children</span>;</span><br><span class="line"><span class="keyword">var</span> olis2 = oUl.<span class="property">childNodes</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(olis);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(olis2);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656841602904dom.png" alt="输出"></p><p>可以通过节点属性获取到想要的节点，比如P节点：</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">        &lt;ul id=<span class="string">&quot;ul1&quot;</span>&gt;</span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> oUl = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;ul1&#x27;</span>);</span><br><span class="line">    <span class="keyword">var</span> olis = <span class="title class_">Array</span>.<span class="title function_">from</span>(oUl.<span class="property">children</span>);</span><br><span class="line">    <span class="keyword">var</span> oP=<span class="string">&quot;&quot;</span>;</span><br><span class="line">    olis.<span class="title function_">forEach</span>(<span class="function"><span class="params">ele</span>=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(ele.<span class="property">nodeName</span>==<span class="string">&quot;P&quot;</span>)&#123;</span><br><span class="line">            oP=ele;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(oP); <span class="comment">//&lt;p&gt;&lt;/p&gt;</span></span><br></pre></td></tr></table></figure><h3 id="获取父节点"><a href="#获取父节点" class="headerlink" title="获取父节点"></a>获取父节点</h3><p><strong>Tip：是属性，不是方法。</strong></p><ul><li>parentNode;   获取<strong>直接</strong>父节点    获取不到是null。</li><li>offsetParent;  获取<strong>已经定位</strong>的父集元素，如果说没有已经定位的父集元素获取到的就是body。</li><li>获取到的还是一个元素节点，所以可以链式操作&#x3D;&gt;test2.parentNode.parentNode。</li><li>获取到的是一个元素对象（具体的节点），获取不到就是null。</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">    &lt;div id=<span class="string">&quot;test&quot;</span>&gt;</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;test1&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;test2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    <span class="keyword">var</span> test2 = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;test2&#x27;</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(test2.<span class="property">parentNode</span>); </span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> &lt;div id=&quot;test1&quot;&gt;</span></span><br><span class="line"><span class="comment">   &lt;div id=&quot;test2&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="comment"> &lt;/div&gt;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure><h3 id="节点的其他获取方式"><a href="#节点的其他获取方式" class="headerlink" title="节点的其他获取方式"></a>节点的其他获取方式</h3><ul><li>带Element的就是元素节点；不带的就是节点(基本都是文本节点#text)</li><li>firstElementChild： 获取<strong>第一个元素子节点</strong>（不兼容：IE8及以下没有这个属性 -&gt;undefined）</li><li>firstChild：获取<strong>第一个子节点</strong></li><li>lastElementChild：获取最后一个<strong>元素子节点</strong>（不兼容：IE8及以下没有这个属性 -&gt;undefined）</li><li>lastChild：获取最后一个<strong>子节点</strong></li><li>previousElementSibling：获取<strong>上一个相邻元素节点</strong>（不兼容：IE8及以下没有这个属性 -&gt;undefined）</li><li>previousSibling：获取<strong>上一个相邻节点</strong></li><li>nextElementSibling：获取<strong>下一个相邻元素节点</strong>（不兼容：IE8及以下没有这个属性 -&gt;undefined）</li><li>nextSibling：获取<strong>下一个相邻节点</strong></li></ul><h3 id="节点的操作"><a href="#节点的操作" class="headerlink" title="节点的操作"></a>节点的操作</h3><blockquote><p>节点的操作就包含了创建、添加、插入、替换、移除与克隆；</p></blockquote><p>插入元素的方式如下：(可一下传入多个)</p><ul><li><p>node.append(…nodes or strings)——在node<strong>下一级末尾</strong>插入节点或字符串；</p></li><li><p>node.prepend(…nodes or strings)——在node<strong>下一级开头</strong>插入节点或字符串；</p></li><li><p>node.before(…nodes or strings)——在node<strong>同级前面</strong>插入节点或字符串；</p></li><li><p>node.after(…nodes or strings)——在node<strong>同级后面</strong>插入节点或字符串；</p></li><li><p>node.replaceWith(…nodes or strings)——将node<strong>替换</strong>为给定的节点或字符串；</p></li><li><p>node.remove()——将node移除；</p></li><li><p>node.cloneNode(boolean)——将node克隆；</p><ul><li>boolean默认为false，只会clone本身；</li><li>boolean设置为true，深度克隆，子元素也会克隆；</li></ul></li><li><p>添加：</p></li></ul><figure class="highlight html"><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"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>hhaa <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>hhee<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建一个DOM对象</span></span><br><span class="line"><span class="keyword">const</span> h2El = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;h2&quot;</span>);</span><br><span class="line">h2El.<span class="property">className</span> = <span class="string">&quot;title&quot;</span>;</span><br><span class="line">h2El.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;active&quot;</span>);</span><br><span class="line">h2El.<span class="property">textContent</span> = <span class="string">&quot;我是标题&quot;</span>;</span><br><span class="line"></span><br><span class="line">box.<span class="title function_">append</span>(h2El);</span><br></pre></td></tr></table></figure><p>执行结果为：</p><figure class="highlight html"><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></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>hhaa <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>hhee<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">&quot;title active&quot;</span>&gt;</span>我是标题<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="旧的节点操作方法"><a href="#旧的节点操作方法" class="headerlink" title="旧的节点操作方法"></a>旧的节点操作方法</h3><p>在很多地方我们也会看到一些旧的操作方法：**(不推荐使用)**</p><ul><li>parentElem.appendChild(node)：在parentElem的父元素最后位置添加一个子元素；</li><li>parentElem.insertBefore(node, nextSibling)：在parentElem的nextSibling前面插入一个子元素；</li><li>parentElem.replaceChild(node, oldChild)：在parentElem中，新元素替换之前的oldChild元素；</li><li>parentElem.removeChild(node)：在parentElem中，移除某一个元素；</li></ul><h2 id="操作元素结构上的属性"><a href="#操作元素结构上的属性" class="headerlink" title="操作元素结构上的属性"></a>操作元素结构上的属性</h2><blockquote><p>ps：color属性是style里的呀，所以style里面的属性用的是xxx.style.xxx；别的用的Attribute；</p></blockquote><h3 id="attribute"><a href="#attribute" class="headerlink" title="attribute"></a>attribute</h3><ul><li>标准的attribute：某些attribute属性是标准的，比如id、class、href、type、value等；</li><li>非标准的attribute：某些attribute属性是自定义的，比如abc、age、height等；</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span> <span class="attr">height</span>=<span class="string">&quot;188&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>对于所有的attribute访问都支持如下的方法：</p></blockquote><ul><li>元素对象.hasAttribute(attr)；检查是否存在 返回boolean值；</li><li>元素对象.setAttribute(attr,val)； 设置</li><li>元素对象. getAttribute(attr)；获取</li><li>元素对象.removeAttribute(attr)；移除</li></ul><blockquote><p>attribute具备以下特征：</p></blockquote><ul><li>它们的名字是大小写不敏感的（id与ID相同）；</li><li>它们的值总是字符串类型的；</li></ul><h3 id="property"><a href="#property" class="headerlink" title="property"></a>property</h3><blockquote><p>对象.属性的方式；</p></blockquote><ul><li>对于<strong>标准</strong>的attribute，会在DOM对象上创建与其对应的property属性：</li><li>对于<strong>非标准</strong>的attribute，为<code>undefined</code>：</li><li>除非特别情况，大多数情况下，设置、获取attribute，推荐使用property的方式：</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span> <span class="attr">height</span>=<span class="string">&quot;188&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="title function_">hasAttribute</span>(<span class="string">&#x27;HEIGHT&#x27;</span>)); <span class="comment">// true(对小大写不敏感)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">id</span>); <span class="comment">// myDiv </span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">className</span>); <span class="comment">// mydivClass (class要用className)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">age</span>); <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure><h3 id="data-自定义属性"><a href="#data-自定义属性" class="headerlink" title="data-*自定义属性"></a>data-*自定义属性</h3><blockquote><p>HTML5的data-*自定义属性，那么它们也是可以在dataset属性中获取到的：</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass&quot;</span> <span class="attr">data-age</span>=<span class="string">&quot;18&quot;</span> <span class="attr">data-height</span>=<span class="string">&quot;188&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">dataset</span>.<span class="property">age</span>);  <span class="comment">// 18</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">dataset</span>.<span class="property">height</span>);  <span class="comment">//188</span></span><br></pre></td></tr></table></figure><h2 id="JavaScript动态修改样式"><a href="#JavaScript动态修改样式" class="headerlink" title="JavaScript动态修改样式"></a>JavaScript动态修改样式</h2><blockquote><p>其实用到了property，通过<code>.style</code> 的方式来修改；(即：标签有标准的attribute：style)；</p></blockquote><h3 id="常规写法"><a href="#常规写法" class="headerlink" title="常规写法"></a>常规写法</h3><blockquote><p>JS动态修改样式，要是修改的样式很多，用JS修改，后期不移维护；</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span>&gt;</span>fsllala<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 点击div动态修改样式</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 缺陷:要是修改的样式很多,用JS修改,后期不移维护;</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line">myDiv.<span class="property">onclick</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    myDiv.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&quot;red&quot;</span>;</span><br><span class="line">    myDiv.<span class="property">style</span>.<span class="property">fontSize</span> = <span class="string">&quot;24px&quot;</span>;</span><br><span class="line">    myDiv.<span class="property">style</span>.<span class="property">background</span> = <span class="string">&quot;orange&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="className"><a href="#className" class="headerlink" title="className"></a>className</h3><blockquote><p>通过className来动态修改样式，它会替换整个class中的字符串；</p></blockquote><blockquote><p>元素的class attribute，对应的property并非叫class，而是className；</p><p>这是因为JavaScript早期是不允许使用class这种关键字来作为对象的属性，所以DOM规范使用了className；</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span>&gt;</span>fsllala<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.active</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">background-color</span>: antiquewhite;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line">myDiv.<span class="property">onclick</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    myDiv.<span class="property">className</span> = <span class="string">&quot;active&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>执行完后，检查dom元素，可以看到原来的class被替换掉了；</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;active&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span>&gt;</span>fsllala<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="classList"><a href="#classList" class="headerlink" title="classList"></a>classList</h3><blockquote><p>同className替换class名相比，如果我们需要添加或者移除单个的class，那么可以使用classList属性。</p></blockquote><ul><li>elem.classList是一个特殊的对象：<ul><li>elem.classList.add(class)：添加一个类；</li><li>elem.classList.remove(class)：添加&#x2F;移除类；</li><li>elem.classList.toggle(class)：如果类不存在就添加类，存在就移除它；</li><li>elem.classList.contains(class)：检查给定类，返回true&#x2F;false；</li></ul></li><li>classList是可迭代对象，可以通过for of进行遍历；</li></ul><p>将文章上方的className替换成classList.add：</p><figure class="highlight js"><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"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line">myDiv.<span class="property">onclick</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    myDiv.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;active&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>执行完后，检查dom元素，可以看到原来的class后面添加了新的class名为 active ；</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass active&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span>&gt;</span>fsllala<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="getComputedStyle"><a href="#getComputedStyle" class="headerlink" title="getComputedStyle"></a>getComputedStyle</h2><blockquote><p>如果我们需要读取样式：</p></blockquote><ul><li><p>对于内联样式，是可以通过style.*的方式读取到的；</p></li><li><p>对于style、css文件中的样式，是读取不到的；</p></li></ul><blockquote><p>这个时候，我们可以通过getComputedStyle的全局函数来实现：</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;active&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span> <span class="attr">style</span>=<span class="string">&quot;font-weight: 900;&quot;</span>&gt;</span>fsllala<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.active</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">background-color</span>: antiquewhite;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line">myDiv.<span class="property">onclick</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">style</span>.<span class="property">color</span>);  <span class="comment">//  空</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">style</span>.<span class="property">fontWeight</span>); <span class="comment">// 900</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">getComputedStyle</span>(myDiv).<span class="property">fontSize</span>);<span class="comment">// 24px</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+        <content type="html"><![CDATA[<h1 id="Dom"><a href="#Dom" class="headerlink" title="Dom"></a>Dom</h1><p>文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口(API)。 (DOM就是用来处理HTML机构)。</p><h2 id="节点"><a href="#节点" class="headerlink" title="节点"></a>节点</h2><p>加载HTML页面时，web浏览器生成一个树型结构，用来表示页面内部结构，称之为DOM树，DOM将这种树型结构理解为由节点组成。</p><h3 id="节点属性"><a href="#节点属性" class="headerlink" title="节点属性"></a>节点属性</h3><table><thead><tr><th>nodeType（节点类型）</th><th>nodeName（节点名称）</th><th>nodeValue（节点值）</th></tr></thead><tbody><tr><td>1（元素节点）</td><td>大写的标签名</td><td>null</td></tr><tr><td>3（文本节点）</td><td>#text</td><td>文本内容</td></tr><tr><td>8（注释节点）</td><td>#comment</td><td>注释内容</td></tr><tr><td>9（文档节点）</td><td>#document</td><td>null</td></tr></tbody></table><h3 id="获取子节点"><a href="#获取子节点" class="headerlink" title="获取子节点"></a>获取子节点</h3><p><strong>Tip：是属性，不是方法。</strong></p><ul><li>父亲节点.children; 获取<strong>直接元素</strong>子节点。注：即nodeType&#x3D;&#x3D;1的元素节点。</li><li>父亲节点.childNodes; 获取<strong>直接</strong>子节点 (和结构相关结构边了这个集合也会改变：比如去掉空格或者换行就相当于去掉了文本节点text)。</li><li>获取子节点，获取到了就是一个类数组集合，获取不到就是空集合。</li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">&quot;ul1&quot;</span>&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">&lt;/ul&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> oUl = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;ul1&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> olis = oUl.<span class="property">children</span>;</span><br><span class="line"><span class="keyword">var</span> olis2 = oUl.<span class="property">childNodes</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(olis);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(olis2);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/1656841602904dom.png" alt="输出"></p><p>可以通过节点属性获取到想要的节点，比如P节点：</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">        &lt;ul id=<span class="string">&quot;ul1&quot;</span>&gt;</span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">li</span>&gt;</span>3.3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">li</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> oUl = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;ul1&#x27;</span>);</span><br><span class="line">    <span class="keyword">var</span> olis = <span class="title class_">Array</span>.<span class="title function_">from</span>(oUl.<span class="property">children</span>);</span><br><span class="line">    <span class="keyword">var</span> oP=<span class="string">&quot;&quot;</span>;</span><br><span class="line">    olis.<span class="title function_">forEach</span>(<span class="function"><span class="params">ele</span>=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(ele.<span class="property">nodeName</span>==<span class="string">&quot;P&quot;</span>)&#123;</span><br><span class="line">            oP=ele;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(oP); <span class="comment">//&lt;p&gt;&lt;/p&gt;</span></span><br></pre></td></tr></table></figure><h3 id="获取父节点"><a href="#获取父节点" class="headerlink" title="获取父节点"></a>获取父节点</h3><p><strong>Tip：是属性，不是方法。</strong></p><ul><li>parentNode;   获取<strong>直接</strong>父节点    获取不到是null。</li><li>offsetParent;  获取<strong>已经定位</strong>的父集元素，如果说没有已经定位的父集元素获取到的就是body。</li><li>获取到的还是一个元素节点，所以可以链式操作&#x3D;&gt;test2.parentNode.parentNode。</li><li>获取到的是一个元素对象（具体的节点），获取不到就是null。</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">    &lt;div id=<span class="string">&quot;test&quot;</span>&gt;</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;test1&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;test2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    <span class="keyword">var</span> test2 = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;test2&#x27;</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(test2.<span class="property">parentNode</span>); </span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> &lt;div id=&quot;test1&quot;&gt;</span></span><br><span class="line"><span class="comment">   &lt;div id=&quot;test2&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="comment"> &lt;/div&gt;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure><h3 id="节点的其他获取方式"><a href="#节点的其他获取方式" class="headerlink" title="节点的其他获取方式"></a>节点的其他获取方式</h3><ul><li>带Element的就是元素节点；不带的就是节点(基本都是文本节点#text)</li><li>firstElementChild： 获取<strong>第一个元素子节点</strong>（不兼容：IE8及以下没有这个属性 -&gt;undefined）</li><li>firstChild：获取<strong>第一个子节点</strong></li><li>lastElementChild：获取最后一个<strong>元素子节点</strong>（不兼容：IE8及以下没有这个属性 -&gt;undefined）</li><li>lastChild：获取最后一个<strong>子节点</strong></li><li>previousElementSibling：获取<strong>上一个相邻元素节点</strong>（不兼容：IE8及以下没有这个属性 -&gt;undefined）</li><li>previousSibling：获取<strong>上一个相邻节点</strong></li><li>nextElementSibling：获取<strong>下一个相邻元素节点</strong>（不兼容：IE8及以下没有这个属性 -&gt;undefined）</li><li>nextSibling：获取<strong>下一个相邻节点</strong></li></ul><h3 id="节点的操作"><a href="#节点的操作" class="headerlink" title="节点的操作"></a>节点的操作</h3><blockquote><p>节点的操作就包含了创建、添加、插入、替换、移除与克隆；</p></blockquote><p>插入元素的方式如下：(可一下传入多个)</p><ul><li><p>node.append(…nodes or strings)——在node<strong>下一级末尾</strong>插入节点或字符串；</p></li><li><p>node.prepend(…nodes or strings)——在node<strong>下一级开头</strong>插入节点或字符串；</p></li><li><p>node.before(…nodes or strings)——在node<strong>同级前面</strong>插入节点或字符串；</p></li><li><p>node.after(…nodes or strings)——在node<strong>同级后面</strong>插入节点或字符串；</p></li><li><p>node.replaceWith(…nodes or strings)——将node<strong>替换</strong>为给定的节点或字符串；</p></li><li><p>node.remove()——将node移除；</p></li><li><p>node.cloneNode(boolean)——将node克隆；</p><ul><li>boolean默认为false，只会clone本身；</li><li>boolean设置为true，深度克隆，子元素也会克隆；</li></ul></li><li><p>添加：</p></li></ul><figure class="highlight html"><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"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>hhaa <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>hhee<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建一个DOM对象</span></span><br><span class="line"><span class="keyword">const</span> h2El = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;h2&quot;</span>);</span><br><span class="line">h2El.<span class="property">className</span> = <span class="string">&quot;title&quot;</span>;</span><br><span class="line">h2El.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;active&quot;</span>);</span><br><span class="line">h2El.<span class="property">textContent</span> = <span class="string">&quot;我是标题&quot;</span>;</span><br><span class="line"></span><br><span class="line">box.<span class="title function_">append</span>(h2El);</span><br></pre></td></tr></table></figure><p>执行结果为：</p><figure class="highlight html"><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></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>hhaa <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>hhee<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">&quot;title active&quot;</span>&gt;</span>我是标题<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="旧的节点操作方法"><a href="#旧的节点操作方法" class="headerlink" title="旧的节点操作方法"></a>旧的节点操作方法</h3><p>在很多地方我们也会看到一些旧的操作方法：**(不推荐使用)**</p><ul><li>parentElem.appendChild(node)：在parentElem的父元素最后位置添加一个子元素；</li><li>parentElem.insertBefore(node, nextSibling)：在parentElem的nextSibling前面插入一个子元素；</li><li>parentElem.replaceChild(node, oldChild)：在parentElem中，新元素替换之前的oldChild元素；</li><li>parentElem.removeChild(node)：在parentElem中，移除某一个元素；</li></ul><h2 id="操作元素结构上的属性"><a href="#操作元素结构上的属性" class="headerlink" title="操作元素结构上的属性"></a>操作元素结构上的属性</h2><blockquote><p>ps：color属性是style里的呀，所以style里面的属性用的是xxx.style.xxx；别的用的Attribute；</p></blockquote><h3 id="attribute"><a href="#attribute" class="headerlink" title="attribute"></a>attribute</h3><ul><li>标准的attribute：某些attribute属性是标准的，比如id、class、href、type、value等；</li><li>非标准的attribute：某些attribute属性是自定义的，比如abc、age、height等；</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span> <span class="attr">height</span>=<span class="string">&quot;188&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>对于所有的attribute访问都支持如下的方法：</p></blockquote><ul><li>元素对象.hasAttribute(attr)；检查是否存在 返回boolean值；</li><li>元素对象.setAttribute(attr,val)； 设置</li><li>元素对象. getAttribute(attr)；获取</li><li>元素对象.removeAttribute(attr)；移除</li></ul><blockquote><p>attribute具备以下特征：</p></blockquote><ul><li>它们的名字是大小写不敏感的（id与ID相同）；</li><li>它们的值总是字符串类型的；</li></ul><h3 id="property"><a href="#property" class="headerlink" title="property"></a>property</h3><blockquote><p>对象.属性的方式；</p></blockquote><ul><li>对于<strong>标准</strong>的attribute，会在DOM对象上创建与其对应的property属性：</li><li>对于<strong>非标准</strong>的attribute，为<code>undefined</code>：</li><li>除非特别情况，大多数情况下，设置、获取attribute，推荐使用property的方式：</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span> <span class="attr">height</span>=<span class="string">&quot;188&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="title function_">hasAttribute</span>(<span class="string">&#x27;HEIGHT&#x27;</span>)); <span class="comment">// true(对小大写不敏感)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">id</span>); <span class="comment">// myDiv </span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">className</span>); <span class="comment">// mydivClass (class要用className)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">age</span>); <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure><h3 id="data-自定义属性"><a href="#data-自定义属性" class="headerlink" title="data-*自定义属性"></a>data-*自定义属性</h3><blockquote><p>HTML5的data-*自定义属性，那么它们也是可以在dataset属性中获取到的：</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass&quot;</span> <span class="attr">data-age</span>=<span class="string">&quot;18&quot;</span> <span class="attr">data-height</span>=<span class="string">&quot;188&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">dataset</span>.<span class="property">age</span>);  <span class="comment">// 18</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">dataset</span>.<span class="property">height</span>);  <span class="comment">//188</span></span><br></pre></td></tr></table></figure><h2 id="JavaScript动态修改样式"><a href="#JavaScript动态修改样式" class="headerlink" title="JavaScript动态修改样式"></a>JavaScript动态修改样式</h2><blockquote><p>其实用到了property，通过<code>.style</code> 的方式来修改；(即：标签有标准的attribute：style)；</p></blockquote><h3 id="常规写法"><a href="#常规写法" class="headerlink" title="常规写法"></a>常规写法</h3><blockquote><p>JS动态修改样式，要是修改的样式很多，用JS修改，后期不移维护；</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span>&gt;</span>fsllala<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 点击div动态修改样式</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 缺陷:要是修改的样式很多,用JS修改,后期不移维护;</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line">myDiv.<span class="property">onclick</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    myDiv.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&quot;red&quot;</span>;</span><br><span class="line">    myDiv.<span class="property">style</span>.<span class="property">fontSize</span> = <span class="string">&quot;24px&quot;</span>;</span><br><span class="line">    myDiv.<span class="property">style</span>.<span class="property">background</span> = <span class="string">&quot;orange&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="className"><a href="#className" class="headerlink" title="className"></a>className</h3><blockquote><p>通过className来动态修改样式，它会替换整个class中的字符串；</p></blockquote><blockquote><p>元素的class attribute，对应的property并非叫class，而是className；</p><p>这是因为JavaScript早期是不允许使用class这种关键字来作为对象的属性，所以DOM规范使用了className；</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span>&gt;</span>fsllala<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.active</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">background-color</span>: antiquewhite;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line">myDiv.<span class="property">onclick</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    myDiv.<span class="property">className</span> = <span class="string">&quot;active&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>执行完后，检查dom元素，可以看到原来的class被替换掉了；</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;active&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span>&gt;</span>fsllala<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="classList"><a href="#classList" class="headerlink" title="classList"></a>classList</h3><blockquote><p>同className替换class名相比，如果我们需要添加或者移除单个的class，那么可以使用classList属性。</p></blockquote><ul><li>elem.classList是一个特殊的对象：<ul><li>elem.classList.add(class)：添加一个类；</li><li>elem.classList.remove(class)：添加&#x2F;移除类；</li><li>elem.classList.toggle(class)：如果类不存在就添加类，存在就移除它；</li><li>elem.classList.contains(class)：检查给定类，返回true&#x2F;false；</li></ul></li><li>classList是可迭代对象，可以通过for of进行遍历；</li></ul><p>将文章上方的className替换成classList.add：</p><figure class="highlight js"><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"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line">myDiv.<span class="property">onclick</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    myDiv.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;active&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>执行完后，检查dom元素，可以看到原来的class后面添加了新的class名为 active ；</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mydivClass active&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span>&gt;</span>fsllala<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="getComputedStyle"><a href="#getComputedStyle" class="headerlink" title="getComputedStyle"></a>getComputedStyle</h2><blockquote><p>如果我们需要读取样式：</p></blockquote><ul><li><p>对于内联样式，是可以通过style.*的方式读取到的；</p></li><li><p>对于style、css文件中的样式，是读取不到的；</p></li></ul><blockquote><p>这个时候，我们可以通过getComputedStyle的全局函数来实现：</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;myDiv&quot;</span> <span class="attr">class</span>=<span class="string">&quot;active&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span> <span class="attr">style</span>=<span class="string">&quot;font-weight: 900;&quot;</span>&gt;</span>fsllala<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.active</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">background-color</span>: antiquewhite;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;myDiv&#x27;</span>);</span><br><span class="line">myDiv.<span class="property">onclick</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">style</span>.<span class="property">color</span>);  <span class="comment">//  空</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(myDiv.<span class="property">style</span>.<span class="property">fontWeight</span>); <span class="comment">// 900</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">getComputedStyle</span>(myDiv).<span class="property">fontSize</span>);<span class="comment">// 24px</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
       
       
       <categories>
@@ -992,7 +992,7 @@
       <link href="/articles/31c1f94e.html"/>
       <url>/articles/31c1f94e.html</url>
       
-        <content type="html"><![CDATA[<h1 id="预解析"><a href="#预解析" class="headerlink" title="预解析"></a>预解析</h1><ul><li>代码运行到浏览器，浏览器提供了一个供JS代码执行的环境(栈区)，在代码执行之前先进行预解析；预解析完成了，代码才会执行。</li><li>预解析又称为变量提升，预解析会对所有(全局与局部)带有var和function关键字的进行预解析；</li><li>预解析分为以下两部分：<ul><li>声明 var a；</li><li>定义 a&#x3D;100；(赋值)</li></ul></li><li>var的预解析只声明不定义；function的预解析声明+定义（function在预解析的声明+定义已经完成了）</li></ul><p><strong>知识点：</strong></p><ul><li><p>js中分为两大区域</p><ol><li>栈区：提供代码运行的环境</li><li>堆区：存储引用数据类型的值</li></ol></li><li><p>js中一旦遇到引用数据类型，就会开辟一块<strong>堆</strong>内存，将引用数据类型的值进行储存，并给这块堆内存分配一个16进制地址。</p></li><li><p>函数执行会生成一个私有作用域，里面代码从上到下执行。（栈区）</p></li></ul><p>栗子1：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a,b); <span class="comment">//undefined undefined</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">200</span>;</span><br><span class="line"><span class="title function_">sum</span>(); </span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;2022平安喜乐&quot;</span>) <span class="comment">//2022平安喜乐</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>解析：</p><p>先进行预解析，预解析完了，代码从上往下开始运行；<strong>堆区是存储的，栈区才是代码执行；</strong></p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847602916yjx.png" alt="栗子1"></p><p>栗子2：</p><p>Tips：先把外层的函数合起来，这样就好分析了。</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a, b); <span class="comment">//undefined undefined</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">200</span>;</span><br><span class="line"><span class="title function_">sum</span>();</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b);<span class="comment">//undefined undefined</span></span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">1000</span>;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="number">2000</span>;</span><br><span class="line">    <span class="title function_">hello</span>();</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">hello</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;2022平安喜乐&quot;</span>) <span class="comment">//2022平安喜乐</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>解析：</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847640974yjx2.png" alt="栗子2"></p><p>栗子3：</p><p>Tips：先把外层的函数合起来，这样就好分析了。</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">200</span>;</span><br><span class="line"><span class="keyword">var</span> c = <span class="number">300</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test1</span>(<span class="params">num1</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">10</span>;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="number">20</span>;</span><br><span class="line">    a++;</span><br><span class="line">    b++;</span><br><span class="line">    c++;</span><br><span class="line">    num1++;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c, num1);</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">test2</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> c = <span class="number">30</span>;</span><br><span class="line">        a++;</span><br><span class="line">        b++;</span><br><span class="line">        c++</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">test2</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">test1</span>(<span class="number">5</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c);</span><br></pre></td></tr></table></figure><p><strong>知识点：</strong></p><p><strong>作用域链：</strong></p><p>作用域链，是一种查找机制，在当前作用域下用到某个变量或方法，先看当前这个作用域有没有，有先用自己私有的，没有往上一级作用域进行查找，上一级作用域没有，再往上一级作用域进行查找，知道找到全局作用域为止（window为止）</p><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656847677915yjx3.png" alt="栗子3"></p><p>PS：函数执行完成会自动销毁，定义一个函数可以调用无数次，每次相互独立的；即从xxxfff000&lt;&#x3D;&gt;test(1)执行完，就销毁释放内存了；</p>]]></content>
+        <content type="html"><![CDATA[<h1 id="预解析"><a href="#预解析" class="headerlink" title="预解析"></a>预解析</h1><ul><li>代码运行到浏览器，浏览器提供了一个供JS代码执行的环境(栈区)，在代码执行之前先进行预解析；预解析完成了，代码才会执行。</li><li>预解析又称为变量提升，预解析会对所有(全局与局部)带有var和function关键字的进行预解析；</li><li>预解析分为以下两部分：<ul><li>声明 var a；</li><li>定义 a&#x3D;100；(赋值)</li></ul></li><li>var的预解析只声明不定义；function的预解析声明+定义（function在预解析的声明+定义已经完成了）</li></ul><p><strong>知识点：</strong></p><ul><li><p>js中分为两大区域</p><ol><li>栈区：提供代码运行的环境</li><li>堆区：存储引用数据类型的值</li></ol></li><li><p>js中一旦遇到引用数据类型，就会开辟一块<strong>堆</strong>内存，将引用数据类型的值进行储存，并给这块堆内存分配一个16进制地址。</p></li><li><p>函数执行会生成一个私有作用域，里面代码从上到下执行。（栈区）</p></li></ul><p>栗子1：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a,b); <span class="comment">//undefined undefined</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">200</span>;</span><br><span class="line"><span class="title function_">sum</span>(); </span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;2022平安喜乐&quot;</span>) <span class="comment">//2022平安喜乐</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>解析：</p><p>先进行预解析，预解析完了，代码从上往下开始运行；<strong>堆区是存储的，栈区才是代码执行；</strong></p><p><img src="https://img.fsllala.top/1656847602916yjx.png" alt="栗子1"></p><p>栗子2：</p><p>Tips：先把外层的函数合起来，这样就好分析了。</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a, b); <span class="comment">//undefined undefined</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">200</span>;</span><br><span class="line"><span class="title function_">sum</span>();</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b);<span class="comment">//undefined undefined</span></span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">1000</span>;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="number">2000</span>;</span><br><span class="line">    <span class="title function_">hello</span>();</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">hello</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;2022平安喜乐&quot;</span>) <span class="comment">//2022平安喜乐</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>解析：</p><p><img src="https://img.fsllala.top/1656847640974yjx2.png" alt="栗子2"></p><p>栗子3：</p><p>Tips：先把外层的函数合起来，这样就好分析了。</p><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">200</span>;</span><br><span class="line"><span class="keyword">var</span> c = <span class="number">300</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test1</span>(<span class="params">num1</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">10</span>;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="number">20</span>;</span><br><span class="line">    a++;</span><br><span class="line">    b++;</span><br><span class="line">    c++;</span><br><span class="line">    num1++;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c, num1);</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">test2</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> c = <span class="number">30</span>;</span><br><span class="line">        a++;</span><br><span class="line">        b++;</span><br><span class="line">        c++</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">test2</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">test1</span>(<span class="number">5</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c);</span><br></pre></td></tr></table></figure><p><strong>知识点：</strong></p><p><strong>作用域链：</strong></p><p>作用域链，是一种查找机制，在当前作用域下用到某个变量或方法，先看当前这个作用域有没有，有先用自己私有的，没有往上一级作用域进行查找，上一级作用域没有，再往上一级作用域进行查找，知道找到全局作用域为止（window为止）</p><p><img src="https://img.fsllala.top/1656847677915yjx3.png" alt="栗子3"></p><p>PS：函数执行完成会自动销毁，定义一个函数可以调用无数次，每次相互独立的；即从xxxfff000&lt;&#x3D;&gt;test(1)执行完，就销毁释放内存了；</p>]]></content>
       
       
       <categories>
@@ -1054,7 +1054,7 @@
       <link href="/articles/feee8227.html"/>
       <url>/articles/feee8227.html</url>
       
-        <content type="html"><![CDATA[<h1 id="This指向"><a href="#This指向" class="headerlink" title="This指向"></a>This指向</h1><ul><li>函数在调用时，JavaScript会默认给this绑定一个值；</li><li>this 的指向不是在创建时就绑定了，而是在调用时被绑定的；</li><li>this的绑定和定义的位置（编写的位置）没有关系；</li><li>this的绑定和<strong>调用方式</strong>以及<strong>调用的位置</strong>有关系；</li></ul><h2 id="四种绑定规则"><a href="#四种绑定规则" class="headerlink" title="四种绑定规则"></a>四种绑定规则</h2><ol><li>默认绑定；</li><li>隐式绑定；</li><li>显示绑定；</li><li>new绑定；</li></ol><h2 id="默认绑定-独立调用"><a href="#默认绑定-独立调用" class="headerlink" title="默认绑定(独立调用)"></a>默认绑定(独立调用)</h2><blockquote><p>独立的调用，this 就代表 window 对象。</p><p>独立调用：xxx()为调用，没有小括号的不叫调用；函数前面没有别的东西调用叫独立；</p></blockquote><ol><li>普通函数被独立的调用</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;foo&quot;</span>, <span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 独立的调用</span></span><br><span class="line"><span class="title function_">foo</span>(); <span class="comment">// Window</span></span><br></pre></td></tr></table></figure><ol start="2"><li>函数定义在对象中，但是独立调用</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;say&quot;</span>, <span class="variable language_">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象.属性调用,指向调用对象</span></span><br><span class="line"><span class="comment">// obj.say(); // obj对象</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 独立的调用</span></span><br><span class="line"><span class="keyword">const</span> newObj = obj.<span class="property">say</span>;</span><br><span class="line"><span class="title function_">newObj</span>(); <span class="comment">// Window</span></span><br></pre></td></tr></table></figure><ol start="3"><li>高阶函数，独立调用</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;say&quot;</span>, <span class="variable language_">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test</span>(<span class="params">fn</span>) &#123;</span><br><span class="line">    <span class="title function_">fn</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 独立的调用</span></span><br><span class="line"><span class="title function_">test</span>(obj.<span class="property">say</span>); <span class="comment">// Window</span></span><br></pre></td></tr></table></figure><ol start="4"><li>严格模式中，独立调用的函数中的this指向的是 undefined</li></ol><blockquote><p>严格模式中,独立调用的函数中的this指向的是 undefined ; webpack打包啥的可能自动设置为严格模式,所以 独立调用的函数建议不要写this,直接写window;</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 严格模式中,独立调用的函数中的this指向的是 undefined ; webpack打包啥的可能自动设置为严格模式,所以 独立调用的函数建议不要写this,直接写window;</span></span><br><span class="line"><span class="meta">&quot;use strict&quot;</span>  </span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">//undefined</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj1 = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;obj1&quot;</span>,</span><br><span class="line">    <span class="attr">say</span>: foo,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> newObj = obj1.<span class="property">say</span>;</span><br><span class="line"><span class="title function_">newObj</span>();</span><br></pre></td></tr></table></figure><h2 id="隐式绑定-对象环境-属性调用"><a href="#隐式绑定-对象环境-属性调用" class="headerlink" title="隐式绑定(对象环境(属性调用))"></a>隐式绑定(对象环境(属性调用))</h2><blockquote><p>也就是它的调用位置中，是通过某个对象发起的函数调用。</p><p>当函数被保存为一个<strong>对象的属性</strong>时，它就可称为这个<strong>对象的方法</strong>。当一个方法被调用时，this被绑定到这个对象上。如果调用表达式包含一个提取属性的动作（. 或 []），那么它被称为方法调用。下面两种在对象环境中都可以解释的通。</p></blockquote><ol><li><strong>对象环境指向对象</strong></li><li><strong>谁调用，this指向谁</strong>。</li></ol><p> <strong>函数作为对象的属性去调用 例一：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">&quot;全局变量&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    name1 :<span class="string">&quot;局部变量&quot;</span>,</span><br><span class="line">    <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name1</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.<span class="title function_">say</span>();  <span class="comment">//obj调用,this指向obj; 从function开始找对象环境&#x27;&#123;&#125;&#x27;,找到的是obj,所以this指向obj;</span></span><br><span class="line"><span class="comment">// undefined</span></span><br><span class="line"><span class="comment">// 局部变量</span></span><br></pre></td></tr></table></figure><p> <strong>函数作为对象的属性去调用 例二：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj1 = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="number">222</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> obj2 = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="number">111</span>,</span><br><span class="line">    <span class="attr">fn</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">a</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj1.<span class="property">fn</span> = obj2.<span class="property">fn</span>;</span><br><span class="line">obj1.<span class="title function_">fn</span>(); <span class="comment">//222 //虽然obj1.fn是从obj2.fn赋值而来，但是调用函数的是obj1，所以this指向obj1。</span></span><br></pre></td></tr></table></figure><p> <strong>函数作为对象的属性去调用 例三：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;hello&quot;</span>,</span><br><span class="line">    <span class="attr">b</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>:<span class="string">&quot;world&quot;</span>,</span><br><span class="line">        <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">a.<span class="property">b</span>.<span class="title function_">say</span>(); <span class="comment">//world   //a.b调用，所以this指向a.b; 从function开始找对象环境&#x27;&#123;&#125;&#x27;,找到的是b,所以this指向b;</span></span><br></pre></td></tr></table></figure><p> <strong>函数作为对象的属性去调用 例四：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&#x27;小明&#x27;</span>,</span><br><span class="line">    <span class="attr">foo</span>:foo</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> name = <span class="string">&#x27;小红&#x27;</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">&#125;</span><br><span class="line">obj.<span class="title function_">foo</span>();<span class="comment">//小明  //obj调用,所以this指向obj; foo就是函数foo()&#123;&#125;,直接替换了,找对象环境&#x27;&#123;&#125;&#x27;,找到的是obj,所以this指向obj;</span></span><br></pre></td></tr></table></figure><p> <strong>函数作为对象的属性去调用 例五：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> bj=<span class="number">10</span>;</span><br><span class="line"><span class="keyword">var</span> obj=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;八戒&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="number">500</span>,</span><br><span class="line">    <span class="attr">say</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);<span class="comment">//window</span></span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">bj</span>);<span class="comment">//10</span></span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">age</span>);<span class="comment">//undefined</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.<span class="title function_">say</span>()();</span><br></pre></td></tr></table></figure><ol><li>为啥是obj.say()()：因为obj.say()执行之后返回了一个函数，并不会执行return函数里面的代码；</li><li>为啥是window：因为obj.say()返回了一个函数，然后在()；相当于直接**函数名()**来调用的；所以指向window；</li></ol><p> <strong>函数作为对象的属性去调用 例六：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> oldObj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;first&#x27;</span>,</span><br><span class="line">    <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">name</span>: <span class="string">&#x27;second&#x27;</span>,</span><br><span class="line">            <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(oldObj.<span class="title function_">say</span>().<span class="title function_">say</span>())<span class="comment">//&#123;name: &#x27;second&#x27;, say: ƒ&#125;</span></span><br></pre></td></tr></table></figure><h2 id="显式绑定"><a href="#显式绑定" class="headerlink" title="显式绑定"></a>显式绑定</h2><blockquote><p>通过call、apply、bind明确的绑定了this指向的对象，所以称之为显式绑定；</p><p>函数的调用为 xxx()；其实这个只是在调用前加上了绑定：xxx.绑定(“绑定对象”)；也可以不写绑定对象：xxx.绑定()，效果和xxx()一样；</p></blockquote><p>场景：需求：执行如下函数，并且函数中的this指向obj；</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">nama</span>: <span class="string">&quot;fsllala&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;foo函数&quot;</span>,<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>隐式绑定</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">obj.<span class="property">foo</span>=foo;</span><br><span class="line">obj.<span class="title function_">foo</span>();</span><br></pre></td></tr></table></figure><blockquote><p>如果我们不希望在对象内部包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？</p></blockquote><ul><li>显式绑定</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 执行函数,并且强制this就是obj对象;</span></span><br><span class="line">foo.<span class="title function_">call</span>(<span class="string">&quot;obj&quot;</span>);</span><br></pre></td></tr></table></figure><p>那让我们系统的了解一下他们的用法吧~</p><h3 id="call、apply"><a href="#call、apply" class="headerlink" title="call、apply"></a>call、apply</h3><ul><li>JavaScript所有的函数都可以使用call和apply方法；</li><li>第一个参数是相同的，要求传入一个对象；这个对象的作用是什么呢？就是给this准备的，在调用这个函数时，会将this绑定到这个传入的对象上。</li><li>后面的参数，apply为数组，call为参数列表；<ul><li><code>func.apply(thisArg,[argsArray])</code></li><li><code>func.call(thisArg,arg1,arg2,...)</code></li></ul></li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">name, age, height</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;foo被调用&quot;</span>, <span class="variable language_">this</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;打印参数&quot;</span>, name, age, height);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ()调用</span></span><br><span class="line"><span class="title function_">foo</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="number">173</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;.&quot;</span>.<span class="title function_">repeat</span>(<span class="number">34</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">/*apply</span></span><br><span class="line"><span class="comment">    第一个参数:绑定this</span></span><br><span class="line"><span class="comment">    第二个参数:传入额外的参数,以数组的形式</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line">foo.<span class="title function_">apply</span>(<span class="string">&#x27;apply&#x27;</span>, [<span class="string">&quot;fsl&quot;</span>, <span class="number">24</span>, <span class="number">174</span>]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;.&quot;</span>.<span class="title function_">repeat</span>(<span class="number">34</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">/*call</span></span><br><span class="line"><span class="comment">    第一个参数:绑定this</span></span><br><span class="line"><span class="comment">    第二个参数:传入额外的参数,以参数列表的形式</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">foo.<span class="title function_">call</span>(<span class="string">&quot;call&quot;</span>,<span class="string">&quot;forward&quot;</span>,<span class="number">25</span>,<span class="number">175</span>);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/this1675947654697.png" alt="this"></p><h3 id="bind"><a href="#bind" class="headerlink" title="bind"></a>bind</h3><p>需求：调用foo时,总是绑定到obj对象身上,并不希望foo对象身上有添加的函数;</p><ul><li>可以通过call或apply实现</li></ul><figure class="highlight js"><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="keyword">function</span> <span class="title function_">foo</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj=&#123;<span class="attr">name</span>:<span class="string">&quot;fsllala&quot;</span>&#125;;</span><br><span class="line"><span class="comment">// 可以通过call或apply实现</span></span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 但是如果多次调用,每次都要这么写,有点繁琐</span></span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br></pre></td></tr></table></figure><blockquote><p>那有没有什么简单的写法呢，即：<code>foo.call(obj)</code>简写一下子</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj = &#123; <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span> &#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> bar = foo.<span class="title function_">bind</span>(obj); <span class="comment">//将obj于this绑定,生成一个新的堆,并赋值给bar变量;</span></span><br><span class="line"><span class="title function_">bar</span>(); <span class="comment">//直接调用即可;</span></span><br><span class="line"><span class="title function_">bar</span>();</span><br><span class="line"><span class="title function_">bar</span>();</span><br></pre></td></tr></table></figure><blockquote><p>可能有人会想：独立函数调用this不指向<code>window</code>了么这不就，其实有个优先级(下文有提到)，独立函数的优先级比较低，低于bind绑定；</p></blockquote><h2 id="new绑定"><a href="#new绑定" class="headerlink" title="new绑定:"></a>new绑定:</h2><h3 id="new做了什么事情"><a href="#new做了什么事情" class="headerlink" title="new做了什么事情"></a>new做了什么事情</h3><ol><li>创建一个新的空对象 (空实例)(obj)</li><li>将构造函数的显式原型赋值给这个新对象，作为新对象的隐式原型</li><li>构造函数内部的 this，会指向创建出来的新对象 (this 指向第一步的空对象)</li><li>执行函数体的代码块</li><li>返回对象</li></ol><blockquote><p>所以说：构造函数中的 this 会指向创建出来的实例对象</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="title class_">TestClass</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = <span class="string">&#x27;111&#x27;</span>;</span><br><span class="line">&#125; </span><br><span class="line"><span class="keyword">var</span> subClass = <span class="keyword">new</span> <span class="title class_">TestClass</span>();</span><br><span class="line">subClass.<span class="property">name</span> = <span class="string">&#x27;cn&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(subClass.<span class="property">name</span>); <span class="comment">//cn</span></span><br><span class="line"><span class="keyword">var</span> subClass1 = <span class="keyword">new</span> <span class="title class_">TestClass</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(subClass1.<span class="property">name</span>) <span class="comment">//111</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Foo</span>(<span class="params">name,age</span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> foo = <span class="keyword">new</span> <span class="title class_">Foo</span>(<span class="string">&#x27;zs&#x27;</span>,<span class="number">18</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(foo.<span class="property">name</span>)<span class="comment">//zs</span></span><br></pre></td></tr></table></figure><h2 id="this优先级"><a href="#this优先级" class="headerlink" title="this优先级"></a>this优先级</h2><blockquote><p>如果new、bind、apply、call、隐式绑定和默认绑定同时出发多个的话，this会指向谁呢？</p></blockquote><p>这里先说一下结论，下面做验证，优先级排名为：</p><ol><li>new</li><li>bind</li><li>apply&#x2F;call</li><li>隐式绑定</li><li>默认绑定</li></ol><p>接下来可通过代码进行如上验证：</p><ul><li>显示优先级(call&#x2F;apply)高于隐式优先级</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.显示绑定&gt;隐式绑定</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">say</span>: foo</span><br><span class="line">&#125;</span><br><span class="line">obj.<span class="title function_">say</span>(); <span class="comment">// &#123;say: ƒ&#125;--&gt;obj对象</span></span><br><span class="line">obj.<span class="property">say</span>.<span class="title function_">call</span>(<span class="string">&quot;lala&quot;</span>); <span class="comment">// String &#123;&#x27;lala&#x27;&#125;   --&gt;string包装类型</span></span><br></pre></td></tr></table></figure><ul><li>显示优先级(bind)高于隐式优先级</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> bar = foo.<span class="title function_">bind</span>(<span class="string">&quot;aaa&quot;</span>); <span class="comment">// --&gt;类似于深拷贝了一份foo</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">say</span>: bar</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.<span class="title function_">say</span>(); <span class="comment">// String &#123;&#x27;aaa&#x27;&#125;  --&gt;string包装类型</span></span><br></pre></td></tr></table></figure><ul><li>new优先级高于隐式优先级</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> obj.<span class="title function_">say</span>(); <span class="comment">// say &#123;&#125;  --&gt;一个空对象</span></span><br></pre></td></tr></table></figure><ul><li>new不能和call&#x2F;apply一起使用</li><li>new优先级高于bind优先级</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>)&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> bar = foo.<span class="title function_">bind</span>(<span class="string">&quot;bbb&quot;</span>);</span><br><span class="line"><span class="comment">// bar(); // String &#123;&#x27;bbb&#x27;&#125;</span></span><br><span class="line"><span class="keyword">new</span> <span class="title function_">bar</span>(); <span class="comment">// foo &#123;&#125;  --&gt;是个空对象,所以new高级bind</span></span><br></pre></td></tr></table></figure><ul><li>bind比apply&#x2F;call优先级高</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> bar = foo.<span class="title function_">bind</span>(<span class="string">&quot;ccc&quot;</span>);</span><br><span class="line"></span><br><span class="line">bar.<span class="title function_">call</span>(<span class="string">&quot;ddd&quot;</span>); <span class="comment">// String &#123;&#x27;ccc&#x27;&#125;</span></span><br></pre></td></tr></table></figure><h2 id="事件对象："><a href="#事件对象：" class="headerlink" title="事件对象："></a>事件对象：</h2><p><strong>在 DOM 事件中使用 this，this 指向了触发事件的 DOM 元素本身</strong></p><figure class="highlight js"><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">li.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">//li</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="箭头函数："><a href="#箭头函数：" class="headerlink" title="箭头函数："></a>箭头函数：</h2><p>详见：<a href="https://fsllala.top/articles/f2866b73">箭头函数</a></p><h2 id="setTimeout与setInterval"><a href="#setTimeout与setInterval" class="headerlink" title="setTimeout与setInterval:"></a>setTimeout与setInterval:</h2><ul><li><p><strong>setInterval和setTimeout中传入函数时，函数中的this会指向window对象</strong></p></li><li><p><strong>可以在定(延)时器外面var that &#x3D; this;来解决这个问题</strong></p></li></ul><figure class="highlight js"><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"><span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span><br><span class="line">&#125;) <span class="comment">//window</span></span><br></pre></td></tr></table></figure><ol><li>这是最最常用的常见的定时器用法，回调函数里的this指向的是window。</li><li>我的理解是：由于setTimeout属于宏任务，它的回调在延时之后才进入到主线程执行，而函数执行的时候才明确 this 的指向。执行的时候，由于没有设置内部this的指向。相当于是普通函数调用。所以会默认指向window</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    <span class="attr">age</span>: <span class="number">10</span>,</span><br><span class="line">    <span class="attr">getage</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">age</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(obj.<span class="property">getage</span>, <span class="number">1000</span>) <span class="comment">// undefined</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    obj.<span class="title function_">getage</span>() <span class="comment">// 10</span></span><br><span class="line">&#125;, <span class="number">1000</span>)</span><br></pre></td></tr></table></figure><ol><li>第一个setTimeout，执行obj.getage 之后，相当于setTimeout的回调是一个匿名函数，执行的时候，函数内部未设置this的指向。相当于是普通函数调用。所以this默认指向window，所以结果是undefined。</li><li>第二个setTimeout，传给setTimeout的也是一个匿名回调函数，执行匿名函数，执行到 obj.getage() 的时候，getage函数里的this，指向的就是obj了，所以能打印出10。<strong>还是遵循 谁调用产生 this指针的函数，this就指向谁的规则</strong></li></ol><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><ul><li><p><a href="https://blog.csdn.net/weixin_37722222/article/details/81625826">this指向总结</a></p></li><li><p><a href="https://blog.csdn.net/qq_33562825/article/details/63679335?spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-12.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-12.no_search_link">关于this的指向问题</a></p></li><li><p><a href="https://www.cnblogs.com/noxussj/p/15217990.html">谈谈你对 this 指向的了解</a></p></li><li><p><a href="https://www.cnblogs.com/zjjDaily/p/9482958.html">深入理解js函数中this指针的指向</a></p></li></ul>]]></content>
+        <content type="html"><![CDATA[<h1 id="This指向"><a href="#This指向" class="headerlink" title="This指向"></a>This指向</h1><ul><li>函数在调用时，JavaScript会默认给this绑定一个值；</li><li>this 的指向不是在创建时就绑定了，而是在调用时被绑定的；</li><li>this的绑定和定义的位置（编写的位置）没有关系；</li><li>this的绑定和<strong>调用方式</strong>以及<strong>调用的位置</strong>有关系；</li></ul><h2 id="四种绑定规则"><a href="#四种绑定规则" class="headerlink" title="四种绑定规则"></a>四种绑定规则</h2><ol><li>默认绑定；</li><li>隐式绑定；</li><li>显示绑定；</li><li>new绑定；</li></ol><h2 id="默认绑定-独立调用"><a href="#默认绑定-独立调用" class="headerlink" title="默认绑定(独立调用)"></a>默认绑定(独立调用)</h2><blockquote><p>独立的调用，this 就代表 window 对象。</p><p>独立调用：xxx()为调用，没有小括号的不叫调用；函数前面没有别的东西调用叫独立；</p></blockquote><ol><li>普通函数被独立的调用</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;foo&quot;</span>, <span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 独立的调用</span></span><br><span class="line"><span class="title function_">foo</span>(); <span class="comment">// Window</span></span><br></pre></td></tr></table></figure><ol start="2"><li>函数定义在对象中，但是独立调用</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;say&quot;</span>, <span class="variable language_">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象.属性调用,指向调用对象</span></span><br><span class="line"><span class="comment">// obj.say(); // obj对象</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 独立的调用</span></span><br><span class="line"><span class="keyword">const</span> newObj = obj.<span class="property">say</span>;</span><br><span class="line"><span class="title function_">newObj</span>(); <span class="comment">// Window</span></span><br></pre></td></tr></table></figure><ol start="3"><li>高阶函数，独立调用</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;say&quot;</span>, <span class="variable language_">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test</span>(<span class="params">fn</span>) &#123;</span><br><span class="line">    <span class="title function_">fn</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 独立的调用</span></span><br><span class="line"><span class="title function_">test</span>(obj.<span class="property">say</span>); <span class="comment">// Window</span></span><br></pre></td></tr></table></figure><ol start="4"><li>严格模式中，独立调用的函数中的this指向的是 undefined</li></ol><blockquote><p>严格模式中,独立调用的函数中的this指向的是 undefined ; webpack打包啥的可能自动设置为严格模式,所以 独立调用的函数建议不要写this,直接写window;</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 严格模式中,独立调用的函数中的this指向的是 undefined ; webpack打包啥的可能自动设置为严格模式,所以 独立调用的函数建议不要写this,直接写window;</span></span><br><span class="line"><span class="meta">&quot;use strict&quot;</span>  </span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">//undefined</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj1 = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;obj1&quot;</span>,</span><br><span class="line">    <span class="attr">say</span>: foo,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> newObj = obj1.<span class="property">say</span>;</span><br><span class="line"><span class="title function_">newObj</span>();</span><br></pre></td></tr></table></figure><h2 id="隐式绑定-对象环境-属性调用"><a href="#隐式绑定-对象环境-属性调用" class="headerlink" title="隐式绑定(对象环境(属性调用))"></a>隐式绑定(对象环境(属性调用))</h2><blockquote><p>也就是它的调用位置中，是通过某个对象发起的函数调用。</p><p>当函数被保存为一个<strong>对象的属性</strong>时，它就可称为这个<strong>对象的方法</strong>。当一个方法被调用时，this被绑定到这个对象上。如果调用表达式包含一个提取属性的动作（. 或 []），那么它被称为方法调用。下面两种在对象环境中都可以解释的通。</p></blockquote><ol><li><strong>对象环境指向对象</strong></li><li><strong>谁调用，this指向谁</strong>。</li></ol><p> <strong>函数作为对象的属性去调用 例一：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">&quot;全局变量&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    name1 :<span class="string">&quot;局部变量&quot;</span>,</span><br><span class="line">    <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name1</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.<span class="title function_">say</span>();  <span class="comment">//obj调用,this指向obj; 从function开始找对象环境&#x27;&#123;&#125;&#x27;,找到的是obj,所以this指向obj;</span></span><br><span class="line"><span class="comment">// undefined</span></span><br><span class="line"><span class="comment">// 局部变量</span></span><br></pre></td></tr></table></figure><p> <strong>函数作为对象的属性去调用 例二：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj1 = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="number">222</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> obj2 = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="number">111</span>,</span><br><span class="line">    <span class="attr">fn</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">a</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj1.<span class="property">fn</span> = obj2.<span class="property">fn</span>;</span><br><span class="line">obj1.<span class="title function_">fn</span>(); <span class="comment">//222 //虽然obj1.fn是从obj2.fn赋值而来，但是调用函数的是obj1，所以this指向obj1。</span></span><br></pre></td></tr></table></figure><p> <strong>函数作为对象的属性去调用 例三：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;hello&quot;</span>,</span><br><span class="line">    <span class="attr">b</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>:<span class="string">&quot;world&quot;</span>,</span><br><span class="line">        <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">a.<span class="property">b</span>.<span class="title function_">say</span>(); <span class="comment">//world   //a.b调用，所以this指向a.b; 从function开始找对象环境&#x27;&#123;&#125;&#x27;,找到的是b,所以this指向b;</span></span><br></pre></td></tr></table></figure><p> <strong>函数作为对象的属性去调用 例四：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&#x27;小明&#x27;</span>,</span><br><span class="line">    <span class="attr">foo</span>:foo</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> name = <span class="string">&#x27;小红&#x27;</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">&#125;</span><br><span class="line">obj.<span class="title function_">foo</span>();<span class="comment">//小明  //obj调用,所以this指向obj; foo就是函数foo()&#123;&#125;,直接替换了,找对象环境&#x27;&#123;&#125;&#x27;,找到的是obj,所以this指向obj;</span></span><br></pre></td></tr></table></figure><p> <strong>函数作为对象的属性去调用 例五：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> bj=<span class="number">10</span>;</span><br><span class="line"><span class="keyword">var</span> obj=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;八戒&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="number">500</span>,</span><br><span class="line">    <span class="attr">say</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);<span class="comment">//window</span></span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">bj</span>);<span class="comment">//10</span></span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">age</span>);<span class="comment">//undefined</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.<span class="title function_">say</span>()();</span><br></pre></td></tr></table></figure><ol><li>为啥是obj.say()()：因为obj.say()执行之后返回了一个函数，并不会执行return函数里面的代码；</li><li>为啥是window：因为obj.say()返回了一个函数，然后在()；相当于直接**函数名()**来调用的；所以指向window；</li></ol><p> <strong>函数作为对象的属性去调用 例六：</strong></p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> oldObj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;first&#x27;</span>,</span><br><span class="line">    <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">name</span>: <span class="string">&#x27;second&#x27;</span>,</span><br><span class="line">            <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(oldObj.<span class="title function_">say</span>().<span class="title function_">say</span>())<span class="comment">//&#123;name: &#x27;second&#x27;, say: ƒ&#125;</span></span><br></pre></td></tr></table></figure><h2 id="显式绑定"><a href="#显式绑定" class="headerlink" title="显式绑定"></a>显式绑定</h2><blockquote><p>通过call、apply、bind明确的绑定了this指向的对象，所以称之为显式绑定；</p><p>函数的调用为 xxx()；其实这个只是在调用前加上了绑定：xxx.绑定(“绑定对象”)；也可以不写绑定对象：xxx.绑定()，效果和xxx()一样；</p></blockquote><p>场景：需求：执行如下函数，并且函数中的this指向obj；</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">nama</span>: <span class="string">&quot;fsllala&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;foo函数&quot;</span>,<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>隐式绑定</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">obj.<span class="property">foo</span>=foo;</span><br><span class="line">obj.<span class="title function_">foo</span>();</span><br></pre></td></tr></table></figure><blockquote><p>如果我们不希望在对象内部包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？</p></blockquote><ul><li>显式绑定</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 执行函数,并且强制this就是obj对象;</span></span><br><span class="line">foo.<span class="title function_">call</span>(<span class="string">&quot;obj&quot;</span>);</span><br></pre></td></tr></table></figure><p>那让我们系统的了解一下他们的用法吧~</p><h3 id="call、apply"><a href="#call、apply" class="headerlink" title="call、apply"></a>call、apply</h3><ul><li>JavaScript所有的函数都可以使用call和apply方法；</li><li>第一个参数是相同的，要求传入一个对象；这个对象的作用是什么呢？就是给this准备的，在调用这个函数时，会将this绑定到这个传入的对象上。</li><li>后面的参数，apply为数组，call为参数列表；<ul><li><code>func.apply(thisArg,[argsArray])</code></li><li><code>func.call(thisArg,arg1,arg2,...)</code></li></ul></li></ul><figure class="highlight js"><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><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">name, age, height</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;foo被调用&quot;</span>, <span class="variable language_">this</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;打印参数&quot;</span>, name, age, height);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ()调用</span></span><br><span class="line"><span class="title function_">foo</span>(<span class="string">&quot;fsllala&quot;</span>, <span class="number">18</span>, <span class="number">173</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;.&quot;</span>.<span class="title function_">repeat</span>(<span class="number">34</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">/*apply</span></span><br><span class="line"><span class="comment">    第一个参数:绑定this</span></span><br><span class="line"><span class="comment">    第二个参数:传入额外的参数,以数组的形式</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line">foo.<span class="title function_">apply</span>(<span class="string">&#x27;apply&#x27;</span>, [<span class="string">&quot;fsl&quot;</span>, <span class="number">24</span>, <span class="number">174</span>]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;.&quot;</span>.<span class="title function_">repeat</span>(<span class="number">34</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">/*call</span></span><br><span class="line"><span class="comment">    第一个参数:绑定this</span></span><br><span class="line"><span class="comment">    第二个参数:传入额外的参数,以参数列表的形式</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">foo.<span class="title function_">call</span>(<span class="string">&quot;call&quot;</span>,<span class="string">&quot;forward&quot;</span>,<span class="number">25</span>,<span class="number">175</span>);</span><br></pre></td></tr></table></figure><p><img src="https://img.fsllala.top/this1675947654697.png" alt="this"></p><h3 id="bind"><a href="#bind" class="headerlink" title="bind"></a>bind</h3><p>需求：调用foo时,总是绑定到obj对象身上,并不希望foo对象身上有添加的函数;</p><ul><li>可以通过call或apply实现</li></ul><figure class="highlight js"><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="keyword">function</span> <span class="title function_">foo</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj=&#123;<span class="attr">name</span>:<span class="string">&quot;fsllala&quot;</span>&#125;;</span><br><span class="line"><span class="comment">// 可以通过call或apply实现</span></span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 但是如果多次调用,每次都要这么写,有点繁琐</span></span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br><span class="line">foo.<span class="title function_">call</span>(obj);</span><br></pre></td></tr></table></figure><blockquote><p>那有没有什么简单的写法呢，即：<code>foo.call(obj)</code>简写一下子</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj = &#123; <span class="attr">name</span>: <span class="string">&quot;fsllala&quot;</span> &#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> bar = foo.<span class="title function_">bind</span>(obj); <span class="comment">//将obj于this绑定,生成一个新的堆,并赋值给bar变量;</span></span><br><span class="line"><span class="title function_">bar</span>(); <span class="comment">//直接调用即可;</span></span><br><span class="line"><span class="title function_">bar</span>();</span><br><span class="line"><span class="title function_">bar</span>();</span><br></pre></td></tr></table></figure><blockquote><p>可能有人会想：独立函数调用this不指向<code>window</code>了么这不就，其实有个优先级(下文有提到)，独立函数的优先级比较低，低于bind绑定；</p></blockquote><h2 id="new绑定"><a href="#new绑定" class="headerlink" title="new绑定:"></a>new绑定:</h2><h3 id="new做了什么事情"><a href="#new做了什么事情" class="headerlink" title="new做了什么事情"></a>new做了什么事情</h3><ol><li>创建一个新的空对象 (空实例)(obj)</li><li>将构造函数的显式原型赋值给这个新对象，作为新对象的隐式原型</li><li>构造函数内部的 this，会指向创建出来的新对象 (this 指向第一步的空对象)</li><li>执行函数体的代码块</li><li>返回对象</li></ol><blockquote><p>所以说：构造函数中的 this 会指向创建出来的实例对象</p></blockquote><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="title class_">TestClass</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = <span class="string">&#x27;111&#x27;</span>;</span><br><span class="line">&#125; </span><br><span class="line"><span class="keyword">var</span> subClass = <span class="keyword">new</span> <span class="title class_">TestClass</span>();</span><br><span class="line">subClass.<span class="property">name</span> = <span class="string">&#x27;cn&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(subClass.<span class="property">name</span>); <span class="comment">//cn</span></span><br><span class="line"><span class="keyword">var</span> subClass1 = <span class="keyword">new</span> <span class="title class_">TestClass</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(subClass1.<span class="property">name</span>) <span class="comment">//111</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Foo</span>(<span class="params">name,age</span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> foo = <span class="keyword">new</span> <span class="title class_">Foo</span>(<span class="string">&#x27;zs&#x27;</span>,<span class="number">18</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(foo.<span class="property">name</span>)<span class="comment">//zs</span></span><br></pre></td></tr></table></figure><h2 id="this优先级"><a href="#this优先级" class="headerlink" title="this优先级"></a>this优先级</h2><blockquote><p>如果new、bind、apply、call、隐式绑定和默认绑定同时出发多个的话，this会指向谁呢？</p></blockquote><p>这里先说一下结论，下面做验证，优先级排名为：</p><ol><li>new</li><li>bind</li><li>apply&#x2F;call</li><li>隐式绑定</li><li>默认绑定</li></ol><p>接下来可通过代码进行如上验证：</p><ul><li>显示优先级(call&#x2F;apply)高于隐式优先级</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.显示绑定&gt;隐式绑定</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">say</span>: foo</span><br><span class="line">&#125;</span><br><span class="line">obj.<span class="title function_">say</span>(); <span class="comment">// &#123;say: ƒ&#125;--&gt;obj对象</span></span><br><span class="line">obj.<span class="property">say</span>.<span class="title function_">call</span>(<span class="string">&quot;lala&quot;</span>); <span class="comment">// String &#123;&#x27;lala&#x27;&#125;   --&gt;string包装类型</span></span><br></pre></td></tr></table></figure><ul><li>显示优先级(bind)高于隐式优先级</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> bar = foo.<span class="title function_">bind</span>(<span class="string">&quot;aaa&quot;</span>); <span class="comment">// --&gt;类似于深拷贝了一份foo</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">say</span>: bar</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.<span class="title function_">say</span>(); <span class="comment">// String &#123;&#x27;aaa&#x27;&#125;  --&gt;string包装类型</span></span><br></pre></td></tr></table></figure><ul><li>new优先级高于隐式优先级</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;fsllala&quot;</span>,</span><br><span class="line">    <span class="attr">say</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> obj.<span class="title function_">say</span>(); <span class="comment">// say &#123;&#125;  --&gt;一个空对象</span></span><br></pre></td></tr></table></figure><ul><li>new不能和call&#x2F;apply一起使用</li><li>new优先级高于bind优先级</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>)&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> bar = foo.<span class="title function_">bind</span>(<span class="string">&quot;bbb&quot;</span>);</span><br><span class="line"><span class="comment">// bar(); // String &#123;&#x27;bbb&#x27;&#125;</span></span><br><span class="line"><span class="keyword">new</span> <span class="title function_">bar</span>(); <span class="comment">// foo &#123;&#125;  --&gt;是个空对象,所以new高级bind</span></span><br></pre></td></tr></table></figure><ul><li>bind比apply&#x2F;call优先级高</li></ul><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> bar = foo.<span class="title function_">bind</span>(<span class="string">&quot;ccc&quot;</span>);</span><br><span class="line"></span><br><span class="line">bar.<span class="title function_">call</span>(<span class="string">&quot;ddd&quot;</span>); <span class="comment">// String &#123;&#x27;ccc&#x27;&#125;</span></span><br></pre></td></tr></table></figure><h2 id="事件对象："><a href="#事件对象：" class="headerlink" title="事件对象："></a>事件对象：</h2><p><strong>在 DOM 事件中使用 this，this 指向了触发事件的 DOM 元素本身</strong></p><figure class="highlight js"><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">li.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">//li</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="箭头函数："><a href="#箭头函数：" class="headerlink" title="箭头函数："></a>箭头函数：</h2><p>详见：<a href="https://fsllala.top/articles/f2866b73">箭头函数</a></p><h2 id="setTimeout与setInterval"><a href="#setTimeout与setInterval" class="headerlink" title="setTimeout与setInterval:"></a>setTimeout与setInterval:</h2><ul><li><p><strong>setInterval和setTimeout中传入函数时，函数中的this会指向window对象</strong></p></li><li><p><strong>可以在定(延)时器外面var that &#x3D; this;来解决这个问题</strong></p></li></ul><figure class="highlight js"><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"><span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span><br><span class="line">&#125;) <span class="comment">//window</span></span><br></pre></td></tr></table></figure><ol><li>这是最最常用的常见的定时器用法，回调函数里的this指向的是window。</li><li>我的理解是：由于setTimeout属于宏任务，它的回调在延时之后才进入到主线程执行，而函数执行的时候才明确 this 的指向。执行的时候，由于没有设置内部this的指向。相当于是普通函数调用。所以会默认指向window</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    <span class="attr">age</span>: <span class="number">10</span>,</span><br><span class="line">    <span class="attr">getage</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">age</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(obj.<span class="property">getage</span>, <span class="number">1000</span>) <span class="comment">// undefined</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    obj.<span class="title function_">getage</span>() <span class="comment">// 10</span></span><br><span class="line">&#125;, <span class="number">1000</span>)</span><br></pre></td></tr></table></figure><ol><li>第一个setTimeout，执行obj.getage 之后，相当于setTimeout的回调是一个匿名函数，执行的时候，函数内部未设置this的指向。相当于是普通函数调用。所以this默认指向window，所以结果是undefined。</li><li>第二个setTimeout，传给setTimeout的也是一个匿名回调函数，执行匿名函数，执行到 obj.getage() 的时候，getage函数里的this，指向的就是obj了，所以能打印出10。<strong>还是遵循 谁调用产生 this指针的函数，this就指向谁的规则</strong></li></ol><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><ul><li><p><a href="https://blog.csdn.net/weixin_37722222/article/details/81625826">this指向总结</a></p></li><li><p><a href="https://blog.csdn.net/qq_33562825/article/details/63679335?spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-12.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-12.no_search_link">关于this的指向问题</a></p></li><li><p><a href="https://www.cnblogs.com/noxussj/p/15217990.html">谈谈你对 this 指向的了解</a></p></li><li><p><a href="https://www.cnblogs.com/zjjDaily/p/9482958.html">深入理解js函数中this指针的指向</a></p></li></ul>]]></content>
       
       
       <categories>
@@ -1139,7 +1139,7 @@
       <link href="/articles/ee7734c7.html"/>
       <url>/articles/ee7734c7.html</url>
       
-        <content type="html"><![CDATA[<h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>客户要求计算机开启，自动执行bat文件。</p><h1 id="步骤"><a href="#步骤" class="headerlink" title="步骤"></a>步骤</h1><h2 id="方法一：使用bat"><a href="#方法一：使用bat" class="headerlink" title="方法一：使用bat"></a>方法一：使用bat</h2><ol><li><p>win+R： <code>shell:startup</code>,打开的路径所存放的软件电脑在开机的时候会自动运行。</p></li><li><p>将bat文件放入这个路径下(这里可能会出现问题,见后文)。</p></li><li><p>修改bat文件的代码：因为路径改了，所以修改的是路径代码：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">c盘路径下切换到C盘根路径:  cd /</span></span><br><span class="line"><span class="comment">c盘路径下切换到D盘: d:</span></span><br><span class="line"><span class="comment">需要切换到存到软件的路径下,而不是cd D:\nodejs起本地服务\server.js</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="attr">d</span>:</span><br><span class="line">cd <span class="attr">D</span>:\nodejs起本地服务</span><br><span class="line">node server.<span class="property">js</span></span><br><span class="line"><span class="comment">//增加pause,报错的时候dos页面也不会闪退。</span></span><br><span class="line">pause</span><br></pre></td></tr></table></figure><ol start="4"><li>可以双击运行，看是否可以正常运行。</li></ol></li></ol><h2 id="方法二：使用vbs"><a href="#方法二：使用vbs" class="headerlink" title="方法二：使用vbs"></a>方法二：使用vbs</h2><ol><li><p>win+R： <code>shell:startup</code>,打开的路径所存放的软件电脑在开机的时候会自动运行。</p></li><li><p>在这个路径下新建文件夹,后缀改为vbs,然后文件–&gt;另存为–&gt;保存类型选<strong>所有文件</strong>–&gt;编码选<strong>ANSI</strong>(这里可能会出现问题,见后文)。</p></li><li><p>输入如下代码：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">bat文件可能会闪退,目前还不知道为啥</span></span><br><span class="line"><span class="comment">路径两边的三个双引号一个都不能少，VBS要用2个双引号来给一个双引号转义,笑cry</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">wscript.<span class="title function_">createobject</span>(<span class="string">&quot;wscript.shell&quot;</span>).<span class="property">run</span> <span class="string">&quot;&quot;</span><span class="string">&quot;D:\nodejs起本地服务\start.bat&quot;</span><span class="string">&quot;&quot;</span>,<span class="number">2</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//可以打开别的任意的软件 例如：</span></span><br><span class="line">wscript.<span class="title function_">createobject</span>(<span class="string">&quot;wscript.shell&quot;</span>).<span class="property">run</span> <span class="string">&quot;&quot;</span><span class="string">&quot;C:\Program Files (x86)\Google\Chrome\Application\chrome.exe&quot;</span><span class="string">&quot;&quot;</span>,<span class="number">2</span></span><br></pre></td></tr></table></figure><p>这段代码的意思是启动Chrome浏览器并最小化,代码最后面的参数作用如下</p><figure class="highlight html"><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">0     后台</span><br><span class="line">1     普通</span><br><span class="line">2     最小化</span><br><span class="line">3     最大化</span><br></pre></td></tr></table></figure></li></ol><h1 id="出现的问题"><a href="#出现的问题" class="headerlink" title="出现的问题"></a>出现的问题</h1><p>复制到启动路径的时候提示没有管理员权限。</p><h2 id="解决方法："><a href="#解决方法：" class="headerlink" title="解决方法："></a>解决方法：</h2><ol><li><p>win+R,键入<strong>gpedit.msc</strong></p></li><li><p><img src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656848388974gly.png" alt="管理员权限"></p></li><li><p>已启动了换已禁用，已禁用了换已启用试试，然后重启。(ps:其实我是没效果的)</p></li><li><p>我习惯性开机用电脑管家杀一些进程，发现没有杀的时候，是可以操作的，不需要管理员权限。</p></li></ol><h1 id="vbs拓展"><a href="#vbs拓展" class="headerlink" title="vbs拓展"></a>vbs拓展</h1><p>VBS是基于Visual Basic的脚本语言。</p><h2 id="一些有意思的脚本代码："><a href="#一些有意思的脚本代码：" class="headerlink" title="一些有意思的脚本代码："></a>一些有意思的脚本代码：</h2><ol><li>实现多条消息快速发送</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">set wshshell=wscript.<span class="title function_">createobject</span>(<span class="string">&quot;wscript.shell&quot;</span>) </span><br><span class="line">wshshell.<span class="property">AppActivate</span><span class="string">&quot;要发送的人的名字&quot;</span> </span><br><span class="line"><span class="keyword">for</span> i=<span class="number">1</span> to <span class="number">100</span></span><br><span class="line">wscript.<span class="property">sleep</span> <span class="number">100</span> </span><br><span class="line">wshshell.<span class="property">sendKeys</span> <span class="string">&quot;^v&quot;</span> </span><br><span class="line">wshshell.<span class="property">sendKeys</span> <span class="string">&quot;%s&quot;</span> </span><br><span class="line">next</span><br></pre></td></tr></table></figure><p>其实就是模仿了键盘的<strong>ctrl+v</strong>,<strong>enter</strong>操作，所以需要先<strong>ctrl+c</strong>一下要发送的东西，然后将vbs文件拖到要发送人的窗口，双击vbs文件即可。</p><ol start="2"><li>一直说You are cute!</li></ol><figure class="highlight js"><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"><span class="comment">//do...loop循环类脚本：</span></span><br><span class="line"><span class="keyword">do</span></span><br><span class="line">msgbox <span class="string">&quot;You are cute!&quot;</span></span><br><span class="line">loop</span><br></pre></td></tr></table></figure><ol start="3"><li>打开无数个计算器（慎用）</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//会死机!!!</span></span><br><span class="line">set wsh=<span class="title function_">createobject</span>(<span class="string">&quot;wscript.shell&quot;</span>) </span><br><span class="line"><span class="keyword">do</span> </span><br><span class="line">wsh.<span class="property">run</span> <span class="string">&quot;calc&quot;</span> </span><br><span class="line">loop </span><br></pre></td></tr></table></figure>]]></content>
+        <content type="html"><![CDATA[<h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>客户要求计算机开启，自动执行bat文件。</p><h1 id="步骤"><a href="#步骤" class="headerlink" title="步骤"></a>步骤</h1><h2 id="方法一：使用bat"><a href="#方法一：使用bat" class="headerlink" title="方法一：使用bat"></a>方法一：使用bat</h2><ol><li><p>win+R： <code>shell:startup</code>,打开的路径所存放的软件电脑在开机的时候会自动运行。</p></li><li><p>将bat文件放入这个路径下(这里可能会出现问题,见后文)。</p></li><li><p>修改bat文件的代码：因为路径改了，所以修改的是路径代码：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">c盘路径下切换到C盘根路径:  cd /</span></span><br><span class="line"><span class="comment">c盘路径下切换到D盘: d:</span></span><br><span class="line"><span class="comment">需要切换到存到软件的路径下,而不是cd D:\nodejs起本地服务\server.js</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="attr">d</span>:</span><br><span class="line">cd <span class="attr">D</span>:\nodejs起本地服务</span><br><span class="line">node server.<span class="property">js</span></span><br><span class="line"><span class="comment">//增加pause,报错的时候dos页面也不会闪退。</span></span><br><span class="line">pause</span><br></pre></td></tr></table></figure><ol start="4"><li>可以双击运行，看是否可以正常运行。</li></ol></li></ol><h2 id="方法二：使用vbs"><a href="#方法二：使用vbs" class="headerlink" title="方法二：使用vbs"></a>方法二：使用vbs</h2><ol><li><p>win+R： <code>shell:startup</code>,打开的路径所存放的软件电脑在开机的时候会自动运行。</p></li><li><p>在这个路径下新建文件夹,后缀改为vbs,然后文件–&gt;另存为–&gt;保存类型选<strong>所有文件</strong>–&gt;编码选<strong>ANSI</strong>(这里可能会出现问题,见后文)。</p></li><li><p>输入如下代码：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">bat文件可能会闪退,目前还不知道为啥</span></span><br><span class="line"><span class="comment">路径两边的三个双引号一个都不能少，VBS要用2个双引号来给一个双引号转义,笑cry</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">wscript.<span class="title function_">createobject</span>(<span class="string">&quot;wscript.shell&quot;</span>).<span class="property">run</span> <span class="string">&quot;&quot;</span><span class="string">&quot;D:\nodejs起本地服务\start.bat&quot;</span><span class="string">&quot;&quot;</span>,<span class="number">2</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//可以打开别的任意的软件 例如：</span></span><br><span class="line">wscript.<span class="title function_">createobject</span>(<span class="string">&quot;wscript.shell&quot;</span>).<span class="property">run</span> <span class="string">&quot;&quot;</span><span class="string">&quot;C:\Program Files (x86)\Google\Chrome\Application\chrome.exe&quot;</span><span class="string">&quot;&quot;</span>,<span class="number">2</span></span><br></pre></td></tr></table></figure><p>这段代码的意思是启动Chrome浏览器并最小化,代码最后面的参数作用如下</p><figure class="highlight html"><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">0     后台</span><br><span class="line">1     普通</span><br><span class="line">2     最小化</span><br><span class="line">3     最大化</span><br></pre></td></tr></table></figure></li></ol><h1 id="出现的问题"><a href="#出现的问题" class="headerlink" title="出现的问题"></a>出现的问题</h1><p>复制到启动路径的时候提示没有管理员权限。</p><h2 id="解决方法："><a href="#解决方法：" class="headerlink" title="解决方法："></a>解决方法：</h2><ol><li><p>win+R,键入<strong>gpedit.msc</strong></p></li><li><p><img src="https://img.fsllala.top/1656848388974gly.png" alt="管理员权限"></p></li><li><p>已启动了换已禁用，已禁用了换已启用试试，然后重启。(ps:其实我是没效果的)</p></li><li><p>我习惯性开机用电脑管家杀一些进程，发现没有杀的时候，是可以操作的，不需要管理员权限。</p></li></ol><h1 id="vbs拓展"><a href="#vbs拓展" class="headerlink" title="vbs拓展"></a>vbs拓展</h1><p>VBS是基于Visual Basic的脚本语言。</p><h2 id="一些有意思的脚本代码："><a href="#一些有意思的脚本代码：" class="headerlink" title="一些有意思的脚本代码："></a>一些有意思的脚本代码：</h2><ol><li>实现多条消息快速发送</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">set wshshell=wscript.<span class="title function_">createobject</span>(<span class="string">&quot;wscript.shell&quot;</span>) </span><br><span class="line">wshshell.<span class="property">AppActivate</span><span class="string">&quot;要发送的人的名字&quot;</span> </span><br><span class="line"><span class="keyword">for</span> i=<span class="number">1</span> to <span class="number">100</span></span><br><span class="line">wscript.<span class="property">sleep</span> <span class="number">100</span> </span><br><span class="line">wshshell.<span class="property">sendKeys</span> <span class="string">&quot;^v&quot;</span> </span><br><span class="line">wshshell.<span class="property">sendKeys</span> <span class="string">&quot;%s&quot;</span> </span><br><span class="line">next</span><br></pre></td></tr></table></figure><p>其实就是模仿了键盘的<strong>ctrl+v</strong>,<strong>enter</strong>操作，所以需要先<strong>ctrl+c</strong>一下要发送的东西，然后将vbs文件拖到要发送人的窗口，双击vbs文件即可。</p><ol start="2"><li>一直说You are cute!</li></ol><figure class="highlight js"><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"><span class="comment">//do...loop循环类脚本：</span></span><br><span class="line"><span class="keyword">do</span></span><br><span class="line">msgbox <span class="string">&quot;You are cute!&quot;</span></span><br><span class="line">loop</span><br></pre></td></tr></table></figure><ol start="3"><li>打开无数个计算器（慎用）</li></ol><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//会死机!!!</span></span><br><span class="line">set wsh=<span class="title function_">createobject</span>(<span class="string">&quot;wscript.shell&quot;</span>) </span><br><span class="line"><span class="keyword">do</span> </span><br><span class="line">wsh.<span class="property">run</span> <span class="string">&quot;calc&quot;</span> </span><br><span class="line">loop </span><br></pre></td></tr></table></figure>]]></content>
       
       
       <categories>
diff --git a/tags/Blob/index.html b/tags/Blob/index.html
index 804fdb86..f6cff9ab 100644
--- a/tags/Blob/index.html
+++ b/tags/Blob/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Blob</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Blob</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Blob</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Blob</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/CommonJs/index.html b/tags/CommonJs/index.html
index 6da24928..19374af4 100644
--- a/tags/CommonJs/index.html
+++ b/tags/CommonJs/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">CommonJs</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - CommonJs</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">CommonJs</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - CommonJs</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/Dom/index.html b/tags/Dom/index.html
index 95634843..77e901a2 100644
--- a/tags/Dom/index.html
+++ b/tags/Dom/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Dom</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Dom</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Dom</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Dom</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/59b49683.html" title="Dom"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_1.webp" alt="Dom" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T13:16:03.000Z" title="发表于 2022-02-01 21:16:03">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/59b49683.html" title="Dom">Dom</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/Dom\345\260\272\345\257\270\344\270\216\344\275\215\347\275\256/index.html" "b/tags/Dom\345\260\272\345\257\270\344\270\216\344\275\215\347\275\256/index.html"
index 1e2d73be..103d9cb4 100644
--- "a/tags/Dom\345\260\272\345\257\270\344\270\216\344\275\215\347\275\256/index.html"
+++ "b/tags/Dom\345\260\272\345\257\270\344\270\216\344\275\215\347\275\256/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Dom尺寸与位置</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Dom尺寸与位置</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Dom尺寸与位置</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Dom尺寸与位置</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/16b55383.html" title="Dom尺寸与位置"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_4.webp" alt="Dom尺寸与位置" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-05T03:02:03.000Z" title="发表于 2022-02-05 11:02:03">2022-02-05</time></div><a class="article-sort-item-title" href="/articles/16b55383.html" title="Dom尺寸与位置">Dom尺寸与位置</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/ES6/index.html b/tags/ES6/index.html
index 28a728cd..3c25dcea 100644
--- a/tags/ES6/index.html
+++ b/tags/ES6/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">ES6</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - ES6</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">ES6</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - ES6</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4dee6fea.html" title="模块化规范"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_8.webp" alt="模块化规范" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-30T07:55:55.000Z" title="发表于 2022-10-30 15:55:55">2022-10-30</time></div><a class="article-sort-item-title" href="/articles/4dee6fea.html" title="模块化规范">模块化规范</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/Echarts/index.html b/tags/Echarts/index.html
index 85f7d6de..26a93c6a 100644
--- a/tags/Echarts/index.html
+++ b/tags/Echarts/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Echarts</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Echarts</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/facd74f4.html" title="Echarts"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_2.webp" alt="Echarts" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></div><a class="article-sort-item-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Echarts</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Echarts</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/facd74f4.html" title="Echarts"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_2.webp" alt="Echarts" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-10T02:16:03.000Z" title="发表于 2022-03-10 10:16:03">2022-03-10</time></div><a class="article-sort-item-title" href="/articles/facd74f4.html" title="Echarts">Echarts</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/JS/index.html b/tags/JS/index.html
index cb7c27c0..9ac291a7 100644
--- a/tags/JS/index.html
+++ b/tags/JS/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">JS</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - JS</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">JS</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - JS</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/Nginx/index.html b/tags/Nginx/index.html
index afb64d97..45ef057b 100644
--- a/tags/Nginx/index.html
+++ b/tags/Nginx/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Nginx</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Nginx</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" alt="Nginx" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div><a class="article-sort-item-title" href="/articles/65b69107.html" title="Nginx">Nginx</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Nginx</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Nginx</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" alt="Nginx" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div><a class="article-sort-item-title" href="/articles/65b69107.html" title="Nginx">Nginx</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/NodeJs-Express/index.html b/tags/NodeJs-Express/index.html
index 9c7e9a52..b099b946 100644
--- a/tags/NodeJs-Express/index.html
+++ b/tags/NodeJs-Express/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs Express</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs Express</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs Express</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs Express</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8ba9ed2d.html" title="NodeJs Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_32.webp" alt="NodeJs Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-11-29T03:29:04.000Z" title="发表于 2022-11-29 11:29:04">2022-11-29</time></div><a class="article-sort-item-title" href="/articles/8ba9ed2d.html" title="NodeJs Express">NodeJs Express</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d95e4f83.html" title="NodeJs3 Express"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_7.webp" alt="NodeJs3 Express" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-05T02:02:03.000Z" title="发表于 2022-03-05 10:02:03">2022-03-05</time></div><a class="article-sort-item-title" href="/articles/d95e4f83.html" title="NodeJs3 Express">NodeJs3 Express</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/NodeJs-Koa2/index.html b/tags/NodeJs-Koa2/index.html
index 3a88dd8a..afa9b214 100644
--- a/tags/NodeJs-Koa2/index.html
+++ b/tags/NodeJs-Koa2/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs Koa2</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs Koa2</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs Koa2</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs Koa2</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" alt="Koa2实战" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div><a class="article-sort-item-title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a></div></div><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/799084bf.html" title="NodeJs Koa2"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_9.webp" alt="NodeJs Koa2" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-29T03:29:04.000Z" title="发表于 2022-12-29 11:29:04">2022-12-29</time></div><a class="article-sort-item-title" href="/articles/799084bf.html" title="NodeJs Koa2">NodeJs Koa2</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/NodeJs-\347\231\273\345\275\225\345\207\255\350\257\201/index.html" "b/tags/NodeJs-\347\231\273\345\275\225\345\207\255\350\257\201/index.html"
index 887bd0f6..bea5b307 100644
--- "a/tags/NodeJs-\347\231\273\345\275\225\345\207\255\350\257\201/index.html"
+++ "b/tags/NodeJs-\347\231\273\345\275\225\345\207\255\350\257\201/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs 登录凭证</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs 登录凭证</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs 登录凭证</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs 登录凭证</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_44.webp" alt="NodeJs 登录凭证" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-01T03:29:04.000Z" title="发表于 2023-01-01 11:29:04">2023-01-01</time></div><a class="article-sort-item-title" href="/articles/5fc41a6b.html" title="NodeJs 登录凭证">NodeJs 登录凭证</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/NodeJs/index.html b/tags/NodeJs/index.html
index 09a78c37..3e1a5af3 100644
--- a/tags/NodeJs/index.html
+++ b/tags/NodeJs/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/73805dbf.html" title="NodeJs起本地服务"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_11.webp" alt="NodeJs起本地服务" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-21T13:22:09.000Z" title="发表于 2021-11-21 21:22:09">2021-11-21</time></div><a class="article-sort-item-title" href="/articles/73805dbf.html" title="NodeJs起本地服务">NodeJs起本地服务</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/NodeJs\345\206\205\347\275\256\346\250\241\345\235\227/index.html" "b/tags/NodeJs\345\206\205\347\275\256\346\250\241\345\235\227/index.html"
index 0415ddfb..db8edd49 100644
--- "a/tags/NodeJs\345\206\205\347\275\256\346\250\241\345\235\227/index.html"
+++ "b/tags/NodeJs\345\206\205\347\275\256\346\250\241\345\235\227/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs内置模块</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs内置模块</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs内置模块</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs内置模块</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/8b67a7b3.html" title="NodeJs1内置模块"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_5.webp" alt="NodeJs1内置模块" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-28T02:02:03.000Z" title="发表于 2022-02-28 10:02:03">2022-02-28</time></div><a class="article-sort-item-title" href="/articles/8b67a7b3.html" title="NodeJs1内置模块">NodeJs1内置模块</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/NodeJs\346\234\215\345\212\241\345\231\250/index.html" "b/tags/NodeJs\346\234\215\345\212\241\345\231\250/index.html"
index 2b2f169d..b8a6b199 100644
--- "a/tags/NodeJs\346\234\215\345\212\241\345\231\250/index.html"
+++ "b/tags/NodeJs\346\234\215\345\212\241\345\231\250/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs服务器</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs服务器</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">NodeJs服务器</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - NodeJs服务器</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e4a31b2e.html" title="NodeJs2服务器"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_6.webp" alt="NodeJs2服务器" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-03T02:02:03.000Z" title="发表于 2022-03-03 10:02:03">2022-03-03</time></div><a class="article-sort-item-title" href="/articles/e4a31b2e.html" title="NodeJs2服务器">NodeJs2服务器</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/PhotoShop/index.html b/tags/PhotoShop/index.html
index 351ee79b..fada19d3 100644
--- a/tags/PhotoShop/index.html
+++ b/tags/PhotoShop/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">PhotoShop</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - PhotoShop</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4c664111.html" title="PhotoShop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_13.webp" alt="PhotoShop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></div><a class="article-sort-item-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">PhotoShop</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - PhotoShop</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/4c664111.html" title="PhotoShop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_13.webp" alt="PhotoShop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-26T16:05:51.000Z" title="发表于 2021-11-27 00:05:51">2021-11-27</time></div><a class="article-sort-item-title" href="/articles/4c664111.html" title="PhotoShop">PhotoShop</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/TypeScript/index.html b/tags/TypeScript/index.html
index 49907235..f738dd7f 100644
--- a/tags/TypeScript/index.html
+++ b/tags/TypeScript/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">TypeScript</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - TypeScript</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7067fd0d.html" title="TypeScript"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_16.webp" alt="TypeScript" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></div><a class="article-sort-item-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">TypeScript</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - TypeScript</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7067fd0d.html" title="TypeScript"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_16.webp" alt="TypeScript" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-01-29T10:16:13.000Z" title="发表于 2023-01-29 18:16:13">2023-01-29</time></div><a class="article-sort-item-title" href="/articles/7067fd0d.html" title="TypeScript">TypeScript</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/Vue2\344\270\2163\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206/index.html" "b/tags/Vue2\344\270\2163\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206/index.html"
index 6fd05d9e..d171f0cf 100644
--- "a/tags/Vue2\344\270\2163\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206/index.html"
+++ "b/tags/Vue2\344\270\2163\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue2与3响应式原理</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue2与3响应式原理</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue2与3响应式原理</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue2与3响应式原理</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_19.webp" alt="Vue2与3响应式原理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-21T16:05:51.000Z" title="发表于 2022-03-22 00:05:51">2022-03-22</time></div><a class="article-sort-item-title" href="/articles/bb6c6e3.html" title="Vue2与3响应式原理">Vue2与3响应式原理</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/Vue3-Suspense/index.html b/tags/Vue3-Suspense/index.html
index b9a1c1dd..1179b223 100644
--- a/tags/Vue3-Suspense/index.html
+++ b/tags/Vue3-Suspense/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 Suspense</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3 Suspense</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 Suspense</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3 Suspense</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/5ca213d8.html" title="Vue3 Suspense"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_25.webp" alt="Vue3 Suspense" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-25T13:16:03.000Z" title="发表于 2022-03-25 21:16:03">2022-03-25</time></div><a class="article-sort-item-title" href="/articles/5ca213d8.html" title="Vue3 Suspense">Vue3 Suspense</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/Vue3-hook/index.html b/tags/Vue3-hook/index.html
index f1fe2b1e..2a30daf7 100644
--- a/tags/Vue3-hook/index.html
+++ b/tags/Vue3-hook/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 hook</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3 hook</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 hook</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3 hook</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/1c4c16aa.html" title="Vue3 hook"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_21.webp" alt="Vue3 hook" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/1c4c16aa.html" title="Vue3 hook">Vue3 hook</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/Vue3-provide\344\270\216inject/index.html" "b/tags/Vue3-provide\344\270\216inject/index.html"
index 3724e82b..18fc7799 100644
--- "a/tags/Vue3-provide\344\270\216inject/index.html"
+++ "b/tags/Vue3-provide\344\270\216inject/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 provide与inject</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3 provide与inject</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 provide与inject</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3 provide与inject</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6d48bcfd.html" title="Vue3 provide与inject"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_22.webp" alt="Vue3 provide与inject" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-24T13:16:03.000Z" title="发表于 2022-03-24 21:16:03">2022-03-24</time></div><a class="article-sort-item-title" href="/articles/6d48bcfd.html" title="Vue3 provide与inject">Vue3 provide与inject</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/Vue3-setup\345\217\202\346\225\260/index.html" "b/tags/Vue3-setup\345\217\202\346\225\260/index.html"
index 9b8502ae..910918c4 100644
--- "a/tags/Vue3-setup\345\217\202\346\225\260/index.html"
+++ "b/tags/Vue3-setup\345\217\202\346\225\260/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 setup参数</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3 setup参数</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 setup参数</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3 setup参数</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/459aa16c.html" title="Vue3 setup参数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_24.webp" alt="Vue3 setup参数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T13:16:03.000Z" title="发表于 2022-03-23 21:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/459aa16c.html" title="Vue3 setup参数">Vue3 setup参数</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/Vue3-watch/index.html b/tags/Vue3-watch/index.html
index 9da145fc..5dd4d055 100644
--- a/tags/Vue3-watch/index.html
+++ b/tags/Vue3-watch/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 watch</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3 watch</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3 watch</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3 watch</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7db1b1fe.html" title="Vue3 watch"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_18.webp" alt="Vue3 watch" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-23T14:16:03.000Z" title="发表于 2022-03-23 22:16:03">2022-03-23</time></div><a class="article-sort-item-title" href="/articles/7db1b1fe.html" title="Vue3 watch">Vue3 watch</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/Vue3/index.html b/tags/Vue3/index.html
index 4dfda84c..955bdb6f 100644
--- a/tags/Vue3/index.html
+++ b/tags/Vue3/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3a42db2d.html" title="Vue3"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_20.webp" alt="Vue3" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></div><a class="article-sort-item-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3a42db2d.html" title="Vue3"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_20.webp" alt="Vue3" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-18T10:16:13.000Z" title="发表于 2022-03-18 18:16:13">2022-03-18</time></div><a class="article-sort-item-title" href="/articles/3a42db2d.html" title="Vue3">Vue3</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/Vue3\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256/index.html" "b/tags/Vue3\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256/index.html"
index 34fccdd2..a58ebedc 100644
--- "a/tags/Vue3\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256/index.html"
+++ "b/tags/Vue3\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3响应式数据</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3响应式数据</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">Vue3响应式数据</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - Vue3响应式数据</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/d61e2f28.html" title="Vue3响应式数据"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_23.webp" alt="Vue3响应式数据" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-03-19T13:16:03.000Z" title="发表于 2022-03-19 21:16:03">2022-03-19</time></div><a class="article-sort-item-title" href="/articles/d61e2f28.html" title="Vue3响应式数据">Vue3响应式数据</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/async-await/index.html b/tags/async-await/index.html
index 6f314609..d5b51000 100644
--- a/tags/async-await/index.html
+++ b/tags/async-await/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">async await</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - async await</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">async await</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - async await</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/bat/index.html b/tags/bat/index.html
index 5541f698..8086c44a 100644
--- a/tags/bat/index.html
+++ b/tags/bat/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">bat</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - bat</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">bat</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - bat</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/https/index.html b/tags/https/index.html
index 984ffd3e..f8c4da9a 100644
--- a/tags/https/index.html
+++ b/tags/https/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">https</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - https</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">https</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - https</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" alt="https" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div><a class="article-sort-item-title" href="/articles/3ef665a6.html" title="https">https</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/index.html b/tags/index.html
index be28f26e..dcd30dce 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">标签</h1></div></header><main class="layout" id="content-inner"><div id="page"><div class="tag-cloud-list is-center"><a href="/tags/Dom/" style="font-size: 1.2em; color: rgb(55, 10, 30)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.2em; color: rgb(107, 111, 124)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.2em; color: rgb(181, 67, 127)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.2em; color: rgb(18, 112, 171)">微任务</a><a href="/tags/NodeJs/" style="font-size: 2.1em; color: rgb(113, 46, 193)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.2em; color: rgb(13, 108, 156)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.2em; color: rgb(182, 123, 189)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.2em; color: rgb(188, 116, 70)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.2em; color: rgb(65, 167, 87)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.2em; color: rgb(196, 1, 94)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.2em; color: rgb(65, 116, 36)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.2em; color: rgb(86, 112, 75)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.2em; color: rgb(71, 24, 87)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.2em; color: rgb(71, 164, 117)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.2em; color: rgb(135, 91, 161)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.2em; color: rgb(8, 116, 91)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.2em; color: rgb(78, 9, 129)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.2em; color: rgb(39, 109, 151)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.65em; color: rgb(197, 74, 199)">JS</a><a href="/tags/Blob/" style="font-size: 1.2em; color: rgb(185, 183, 155)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.2em; color: rgb(88, 106, 109)">文件下载</a><a href="/tags/https/" style="font-size: 1.2em; color: rgb(189, 11, 173)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.2em; color: rgb(26, 32, 61)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.2em; color: rgb(151, 192, 75)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.2em; color: rgb(194, 165, 156)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.65em; color: rgb(149, 5, 166)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.65em; color: rgb(2, 91, 166)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.2em; color: rgb(85, 151, 187)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.2em; color: rgb(106, 74, 84)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.2em; color: rgb(142, 58, 34)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.2em; color: rgb(164, 76, 102)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.2em; color: rgb(177, 39, 44)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.2em; color: rgb(200, 134, 122)">原型链</a><a href="/tags/websocket/" style="font-size: 1.2em; color: rgb(142, 152, 65)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.2em; color: rgb(106, 118, 101)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.2em; color: rgb(142, 29, 73)">bat</a><a href="/tags/vbs/" style="font-size: 1.2em; color: rgb(93, 39, 178)">vbs</a><a href="/tags/promise/" style="font-size: 1.2em; color: rgb(18, 165, 163)">promise</a><a href="/tags/async-await/" style="font-size: 1.2em; color: rgb(21, 200, 47)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.2em; color: rgb(153, 161, 56)">图片懒加载</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.2em; color: rgb(139, 27, 41)">拖拽</a><a href="/tags/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/" style="font-size: 1.2em; color: rgb(142, 101, 151)">深浅拷贝</a><a href="/tags/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/" style="font-size: 1.2em; color: rgb(134, 1, 134)">栈内存和堆内存</a><a href="/tags/NodeJs-%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81/" style="font-size: 1.2em; color: rgb(186, 49, 37)">NodeJs 登录凭证</a><a href="/tags/CommonJs/" style="font-size: 1.2em; color: rgb(38, 57, 199)">CommonJs</a><a href="/tags/ES6/" style="font-size: 1.2em; color: rgb(111, 33, 145)">ES6</a><a href="/tags/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/" style="font-size: 1.2em; color: rgb(161, 67, 123)">箭头函数</a><a href="/tags/%E8%B7%A8%E5%9F%9F/" style="font-size: 1.2em; color: rgb(50, 124, 148)">跨域</a><a href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" style="font-size: 1.2em; color: rgb(37, 98, 11)">网络安全</a><a href="/tags/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/" style="font-size: 1.2em; color: rgb(181, 13, 132)">面向对象</a><a href="/tags/%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0/" style="font-size: 1.2em; color: rgb(69, 47, 93)">构造函数</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F/" style="font-size: 1.2em; color: rgb(124, 18, 109)">原型模式</a><a href="/tags/%E9%A2%84%E8%A7%A3%E6%9E%90/" style="font-size: 1.2em; color: rgb(59, 137, 139)">预解析</a><a href="/tags/%E5%8F%98%E9%87%8F%E6%8F%90%E7%A4%BA/" style="font-size: 1.2em; color: rgb(103, 119, 42)">变量提示</a><a href="/tags/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/" style="font-size: 1.2em; color: rgb(191, 69, 124)">作用域链</a></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">标签</h1></div></header><main class="layout" id="content-inner"><div id="page"><div class="tag-cloud-list is-center"><a href="/tags/Dom/" style="font-size: 1.2em; color: rgb(145, 84, 187)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.2em; color: rgb(22, 195, 44)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.2em; color: rgb(25, 126, 188)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.2em; color: rgb(152, 170, 176)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.2em; color: rgb(66, 105, 24)">微任务</a><a href="/tags/NodeJs/" style="font-size: 2.1em; color: rgb(16, 23, 169)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.2em; color: rgb(95, 110, 61)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.2em; color: rgb(69, 112, 161)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.2em; color: rgb(110, 161, 104)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.2em; color: rgb(84, 115, 138)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.2em; color: rgb(95, 139, 134)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.2em; color: rgb(65, 198, 200)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.2em; color: rgb(14, 55, 127)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.2em; color: rgb(48, 43, 39)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.2em; color: rgb(27, 60, 151)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.2em; color: rgb(37, 98, 133)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.2em; color: rgb(51, 55, 22)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.2em; color: rgb(86, 20, 180)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.65em; color: rgb(167, 51, 193)">JS</a><a href="/tags/Blob/" style="font-size: 1.2em; color: rgb(63, 117, 19)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.2em; color: rgb(198, 129, 108)">文件下载</a><a href="/tags/https/" style="font-size: 1.2em; color: rgb(29, 45, 178)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.65em; color: rgb(135, 49, 103)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.2em; color: rgb(137, 80, 186)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.2em; color: rgb(192, 119, 71)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.2em; color: rgb(47, 176, 23)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.65em; color: rgb(88, 148, 4)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.2em; color: rgb(102, 101, 167)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.2em; color: rgb(9, 148, 52)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.2em; color: rgb(134, 197, 49)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.2em; color: rgb(170, 119, 148)">this指向</a><a href="/tags/webpack/" style="font-size: 1.2em; color: rgb(183, 101, 147)">webpack</a><a href="/tags/nvm/" style="font-size: 1.2em; color: rgb(146, 196, 32)">nvm</a><a href="/tags/promise/" style="font-size: 1.2em; color: rgb(77, 149, 101)">promise</a><a href="/tags/async-await/" style="font-size: 1.2em; color: rgb(63, 112, 134)">async await</a><a href="/tags/bat/" style="font-size: 1.2em; color: rgb(42, 114, 184)">bat</a><a href="/tags/vbs/" style="font-size: 1.2em; color: rgb(52, 14, 63)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.2em; color: rgb(53, 6, 27)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.2em; color: rgb(10, 32, 200)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.2em; color: rgb(88, 191, 43)">拖拽</a><a href="/tags/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/" style="font-size: 1.2em; color: rgb(174, 164, 32)">深浅拷贝</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.2em; color: rgb(199, 19, 52)">图片懒加载</a><a href="/tags/CommonJs/" style="font-size: 1.2em; color: rgb(85, 57, 19)">CommonJs</a><a href="/tags/ES6/" style="font-size: 1.2em; color: rgb(17, 182, 183)">ES6</a><a href="/tags/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/" style="font-size: 1.2em; color: rgb(156, 13, 3)">栈内存和堆内存</a><a href="/tags/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/" style="font-size: 1.2em; color: rgb(143, 102, 18)">箭头函数</a><a href="/tags/NodeJs-%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81/" style="font-size: 1.2em; color: rgb(83, 87, 138)">NodeJs 登录凭证</a><a href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" style="font-size: 1.2em; color: rgb(189, 37, 101)">网络安全</a><a href="/tags/%E8%B7%A8%E5%9F%9F/" style="font-size: 1.2em; color: rgb(38, 90, 160)">跨域</a><a href="/tags/%E9%A2%84%E8%A7%A3%E6%9E%90/" style="font-size: 1.2em; color: rgb(24, 149, 68)">预解析</a><a href="/tags/%E5%8F%98%E9%87%8F%E6%8F%90%E7%A4%BA/" style="font-size: 1.2em; color: rgb(11, 120, 29)">变量提示</a><a href="/tags/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/" style="font-size: 1.2em; color: rgb(8, 156, 83)">作用域链</a><a href="/tags/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/" style="font-size: 1.2em; color: rgb(126, 140, 12)">面向对象</a><a href="/tags/%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0/" style="font-size: 1.2em; color: rgb(72, 104, 161)">构造函数</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F/" style="font-size: 1.2em; color: rgb(113, 103, 155)">原型模式</a></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/mysql/index.html b/tags/mysql/index.html
index a3fac347..c5c8f9a7 100644
--- a/tags/mysql/index.html
+++ b/tags/mysql/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">mysql</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - mysql</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">mysql</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - mysql</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/46635768.html" title="NodeJs连接MySQL"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_10.webp" alt="NodeJs连接MySQL" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-12-30T07:55:55.000Z" title="发表于 2022-12-30 15:55:55">2022-12-30</time></div><a class="article-sort-item-title" href="/articles/46635768.html" title="NodeJs连接MySQL">NodeJs连接MySQL</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/nvm/index.html b/tags/nvm/index.html
index e279c92f..2fd6ec13 100644
--- a/tags/nvm/index.html
+++ b/tags/nvm/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">nvm</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - nvm</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">nvm</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - nvm</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/7cf6476b.html" title="nvm、npm与nrm"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_12.webp" alt="nvm、npm与nrm" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-10-23T07:55:55.000Z" title="发表于 2022-10-23 15:55:55">2022-10-23</time></div><a class="article-sort-item-title" href="/articles/7cf6476b.html" title="nvm、npm与nrm">nvm、npm与nrm</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/promise/index.html b/tags/promise/index.html
index 406f8b39..25e23223 100644
--- a/tags/promise/index.html
+++ b/tags/promise/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">promise</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - promise</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">promise</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - promise</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/957893b.html" title="异步处理"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_34.webp" alt="异步处理" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-25T09:48:34.000Z" title="发表于 2021-12-25 17:48:34">2021-12-25</time></div><a class="article-sort-item-title" href="/articles/957893b.html" title="异步处理">异步处理</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/this\346\214\207\345\220\221/index.html" "b/tags/this\346\214\207\345\220\221/index.html"
index d13891a5..5b504f10 100644
--- "a/tags/this\346\214\207\345\220\221/index.html"
+++ "b/tags/this\346\214\207\345\220\221/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">this指向</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - this指向</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">this指向</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - this指向</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/feee8227.html" title="this"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_14.webp" alt="this" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-20T08:55:37.000Z" title="发表于 2022-01-20 16:55:37">2022-01-20</time></div><a class="article-sort-item-title" href="/articles/feee8227.html" title="this">this</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/vbs/index.html b/tags/vbs/index.html
index 3f750d07..8222c5c4 100644
--- a/tags/vbs/index.html
+++ b/tags/vbs/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">vbs</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - vbs</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">vbs</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - vbs</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ee7734c7.html" title="开机自启"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_27.webp" alt="开机自启" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-12-04T12:38:46.000Z" title="发表于 2021-12-04 20:38:46">2021-12-04</time></div><a class="article-sort-item-title" href="/articles/ee7734c7.html" title="开机自启">开机自启</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/webpack/index.html b/tags/webpack/index.html
index 65231184..3f6a7e1c 100644
--- a/tags/webpack/index.html
+++ b/tags/webpack/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">webpack</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - webpack</div><div class="article-sort"><div class="article-sort-item year">2024</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" alt="webpack" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div><a class="article-sort-item-title" href="/articles/b9f20a20.html" title="webpack">webpack</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">webpack</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - webpack</div><div class="article-sort"><div class="article-sort-item year">2024</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" alt="webpack" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div><a class="article-sort-item-title" href="/articles/b9f20a20.html" title="webpack">webpack</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git a/tags/websocket/index.html b/tags/websocket/index.html
index 2074a042..e3a9c941 100644
--- a/tags/websocket/index.html
+++ b/tags/websocket/index.html
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">websocket</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - websocket</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">websocket</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - websocket</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\344\275\234\347\224\250\345\237\237\351\223\276/index.html" "b/tags/\344\275\234\347\224\250\345\237\237\351\223\276/index.html"
index 7817a417..4fff23ff 100644
--- "a/tags/\344\275\234\347\224\250\345\237\237\351\223\276/index.html"
+++ "b/tags/\344\275\234\347\224\250\345\237\237\351\223\276/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">作用域链</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 作用域链</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">作用域链</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 作用域链</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\345\216\237\345\236\213/index.html" "b/tags/\345\216\237\345\236\213/index.html"
index 32a4606f..a1a8b83f 100644
--- "a/tags/\345\216\237\345\236\213/index.html"
+++ "b/tags/\345\216\237\345\236\213/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">原型</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 原型</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">原型</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 原型</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\345\216\237\345\236\213\346\250\241\345\274\217/index.html" "b/tags/\345\216\237\345\236\213\346\250\241\345\274\217/index.html"
index 744b73c1..3a70bfc8 100644
--- "a/tags/\345\216\237\345\236\213\346\250\241\345\274\217/index.html"
+++ "b/tags/\345\216\237\345\236\213\346\250\241\345\274\217/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">原型模式</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 原型模式</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">原型模式</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 原型模式</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\345\216\237\345\236\213\351\223\276/index.html" "b/tags/\345\216\237\345\236\213\351\223\276/index.html"
index 38ef5888..e3702215 100644
--- "a/tags/\345\216\237\345\236\213\351\223\276/index.html"
+++ "b/tags/\345\216\237\345\236\213\351\223\276/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">原型链</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 原型链</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">原型链</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 原型链</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e8f85541.html" title="原型与原型链"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_36.webp" alt="原型与原型链" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-26T10:44:04.000Z" title="发表于 2022-02-26 18:44:04">2022-02-26</time></div><a class="article-sort-item-title" href="/articles/e8f85541.html" title="原型与原型链">原型与原型链</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\345\217\230\351\207\217\346\217\220\347\244\272/index.html" "b/tags/\345\217\230\351\207\217\346\217\220\347\244\272/index.html"
index 9589e5fe..eb46e214 100644
--- "a/tags/\345\217\230\351\207\217\346\217\220\347\244\272/index.html"
+++ "b/tags/\345\217\230\351\207\217\346\217\220\347\244\272/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">变量提示</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 变量提示</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">变量提示</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 变量提示</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275/index.html" "b/tags/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275/index.html"
index c6701c12..788b6e84 100644
--- "a/tags/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275/index.html"
+++ "b/tags/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">图片懒加载</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 图片懒加载</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">图片懒加载</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 图片懒加载</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/3d72a2c2.html" title="懒加载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_30.webp" alt="懒加载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T02:53:19.000Z" title="发表于 2022-02-08 10:53:19">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/3d72a2c2.html" title="懒加载">懒加载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\345\256\217\344\273\273\345\212\241/index.html" "b/tags/\345\256\217\344\273\273\345\212\241/index.html"
index e5417ae9..8be22e58 100644
--- "a/tags/\345\256\217\344\273\273\345\212\241/index.html"
+++ "b/tags/\345\256\217\344\273\273\345\212\241/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">宏任务</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 宏任务</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">宏任务</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 宏任务</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\345\276\256\344\273\273\345\212\241/index.html" "b/tags/\345\276\256\344\273\273\345\212\241/index.html"
index 29579047..02ceb1db 100644
--- "a/tags/\345\276\256\344\273\273\345\212\241/index.html"
+++ "b/tags/\345\276\256\344\273\273\345\212\241/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">微任务</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 微任务</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">微任务</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 微任务</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/df38ec5a.html" title="EventLoop"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_3.webp" alt="EventLoop" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-18T02:02:03.000Z" title="发表于 2022-02-18 10:02:03">2022-02-18</time></div><a class="article-sort-item-title" href="/articles/df38ec5a.html" title="EventLoop">EventLoop</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\345\277\203\350\267\263\351\207\215\350\277\236\346\234\272\345\210\266/index.html" "b/tags/\345\277\203\350\267\263\351\207\215\350\277\236\346\234\272\345\210\266/index.html"
index ab99851e..0848e107 100644
--- "a/tags/\345\277\203\350\267\263\351\207\215\350\277\236\346\234\272\345\210\266/index.html"
+++ "b/tags/\345\277\203\350\267\263\351\207\215\350\277\236\346\234\272\345\210\266/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">心跳重连机制</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 心跳重连机制</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">心跳重连机制</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 心跳重连机制</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/42ce80b9.html" title="websocket"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_26.webp" alt="websocket" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-16T08:55:37.000Z" title="发表于 2022-01-16 16:55:37">2022-01-16</time></div><a class="article-sort-item-title" href="/articles/42ce80b9.html" title="websocket">websocket</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\345\277\253\346\215\267\351\224\256/index.html" "b/tags/\345\277\253\346\215\267\351\224\256/index.html"
index aa4f080c..205b8998 100644
--- "a/tags/\345\277\253\346\215\267\351\224\256/index.html"
+++ "b/tags/\345\277\253\346\215\267\351\224\256/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:23'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">快捷键</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 快捷键</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">快捷键</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 快捷键</div><div class="article-sort"><div class="article-sort-item year">2021</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/12a67745.html" title="Typora常用快捷键"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_17.webp" alt="Typora常用快捷键" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2021-11-06T09:46:12.000Z" title="发表于 2021-11-06 17:46:12">2021-11-06</time></div><a class="article-sort-item-title" href="/articles/12a67745.html" title="Typora常用快捷键">Typora常用快捷键</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\346\213\226\346\213\275/index.html" "b/tags/\346\213\226\346\213\275/index.html"
index 9fcbe722..ad53b66f 100644
--- "a/tags/\346\213\226\346\213\275/index.html"
+++ "b/tags/\346\213\226\346\213\275/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">拖拽</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 拖拽</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">拖拽</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 拖拽</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/ef0a4464.html" title="拖拽"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_33.webp" alt="拖拽" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-08T14:07:52.000Z" title="发表于 2022-02-08 22:07:52">2022-02-08</time></div><a class="article-sort-item-title" href="/articles/ef0a4464.html" title="拖拽">拖拽</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\346\226\207\344\273\266\344\270\213\350\275\275/index.html" "b/tags/\346\226\207\344\273\266\344\270\213\350\275\275/index.html"
index bd25a90d..3aedbcd5 100644
--- "a/tags/\346\226\207\344\273\266\344\270\213\350\275\275/index.html"
+++ "b/tags/\346\226\207\344\273\266\344\270\213\350\275\275/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">文件下载</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 文件下载</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">文件下载</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 文件下载</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f7f97ed.html" title="文件下载"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_38.webp" alt="文件下载" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-08-07T08:11:10.000Z" title="发表于 2022-08-07 16:11:10">2022-08-07</time></div><a class="article-sort-item-title" href="/articles/f7f97ed.html" title="文件下载">文件下载</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\346\236\204\351\200\240\345\207\275\346\225\260/index.html" "b/tags/\346\236\204\351\200\240\345\207\275\346\225\260/index.html"
index 6acf33bd..810bb4c2 100644
--- "a/tags/\346\236\204\351\200\240\345\207\275\346\225\260/index.html"
+++ "b/tags/\346\236\204\351\200\240\345\207\275\346\225\260/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">构造函数</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 构造函数</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">构造函数</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 构造函数</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\346\240\210\345\206\205\345\255\230\345\222\214\345\240\206\345\206\205\345\255\230/index.html" "b/tags/\346\240\210\345\206\205\345\255\230\345\222\214\345\240\206\345\206\205\345\255\230/index.html"
index ff61f129..68b0849d 100644
--- "a/tags/\346\240\210\345\206\205\345\255\230\345\222\214\345\240\206\345\206\205\345\255\230/index.html"
+++ "b/tags/\346\240\210\345\206\205\345\255\230\345\222\214\345\240\206\345\206\205\345\255\230/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">栈内存和堆内存</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 栈内存和堆内存</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">栈内存和堆内存</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 栈内存和堆内存</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/6e473482.html" title="栈内存和堆内存"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_37.webp" alt="栈内存和堆内存" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-24T10:41:44.000Z" title="发表于 2022-04-24 18:41:44">2022-04-24</time></div><a class="article-sort-item-title" href="/articles/6e473482.html" title="栈内存和堆内存">栈内存和堆内存</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\346\267\261\346\213\267\350\264\235/index.html" "b/tags/\346\267\261\346\213\267\350\264\235/index.html"
index f6e1f8ad..3dde4b1e 100644
--- "a/tags/\346\267\261\346\213\267\350\264\235/index.html"
+++ "b/tags/\346\267\261\346\213\267\350\264\235/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">深拷贝</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 深拷贝</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">深拷贝</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 深拷贝</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_15.webp" alt="JSON.stringify 深拷贝弊端" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-06-06T07:56:21.000Z" title="发表于 2022-06-06 15:56:21">2022-06-06</time></div><a class="article-sort-item-title" href="/articles/f6275dee.html" title="JSON.stringify 深拷贝弊端">JSON.stringify 深拷贝弊端</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\346\267\261\346\265\205\346\213\267\350\264\235/index.html" "b/tags/\346\267\261\346\265\205\346\213\267\350\264\235/index.html"
index e2a5d6f5..4e431366 100644
--- "a/tags/\346\267\261\346\265\205\346\213\267\350\264\235/index.html"
+++ "b/tags/\346\267\261\346\265\205\346\213\267\350\264\235/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">深浅拷贝</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 深浅拷贝</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">深浅拷贝</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 深浅拷贝</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/e98504f5.html" title="深浅拷贝"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_28.webp" alt="深浅拷贝" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-05-02T10:41:49.000Z" title="发表于 2022-05-02 18:41:49">2022-05-02</time></div><a class="article-sort-item-title" href="/articles/e98504f5.html" title="深浅拷贝">深浅拷贝</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\347\256\255\345\244\264\345\207\275\346\225\260/index.html" "b/tags/\347\256\255\345\244\264\345\207\275\346\225\260/index.html"
index 8190fa31..3f7da1ea 100644
--- "a/tags/\347\256\255\345\244\264\345\207\275\346\225\260/index.html"
+++ "b/tags/\347\256\255\345\244\264\345\207\275\346\225\260/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">箭头函数</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 箭头函数</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">箭头函数</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 箭头函数</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/f2866b73.html" title="箭头函数"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_39.webp" alt="箭头函数" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-01-24T00:57:41.000Z" title="发表于 2022-01-24 08:57:41">2022-01-24</time></div><a class="article-sort-item-title" href="/articles/f2866b73.html" title="箭头函数">箭头函数</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\347\275\221\347\273\234\345\256\211\345\205\250/index.html" "b/tags/\347\275\221\347\273\234\345\256\211\345\205\250/index.html"
index 635a6fd7..f0fb4b61 100644
--- "a/tags/\347\275\221\347\273\234\345\256\211\345\205\250/index.html"
+++ "b/tags/\347\275\221\347\273\234\345\256\211\345\205\250/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">网络安全</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 网络安全</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" alt="网络安全修改" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div><a class="article-sort-item-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">网络安全</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 网络安全</div><div class="article-sort"><div class="article-sort-item year">2023</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" alt="网络安全修改" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div><a class="article-sort-item-title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\350\267\250\345\237\237/index.html" "b/tags/\350\267\250\345\237\237/index.html"
index a6f3221a..032a35fb 100644
--- "a/tags/\350\267\250\345\237\237/index.html"
+++ "b/tags/\350\267\250\345\237\237/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">跨域</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 跨域</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">跨域</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 跨域</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/58add7e9.html" title="跨域"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_29.webp" alt="跨域" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-04-09T01:53:27.000Z" title="发表于 2022-04-09 09:53:27">2022-04-09</time></div><a class="article-sort-item-title" href="/articles/58add7e9.html" title="跨域">跨域</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\351\235\242\345\220\221\345\257\271\350\261\241/index.html" "b/tags/\351\235\242\345\220\221\345\257\271\350\261\241/index.html"
index 5d1ca20a..2250b420 100644
--- "a/tags/\351\235\242\345\220\221\345\257\271\350\261\241/index.html"
+++ "b/tags/\351\235\242\345\220\221\345\257\271\350\261\241/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">面向对象</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 面向对象</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">面向对象</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 面向对象</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/28239a8d.html" title="面向对象"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_31.webp" alt="面向对象" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-19T12:13:39.000Z" title="发表于 2022-02-19 20:13:39">2022-02-19</time></div><a class="article-sort-item-title" href="/articles/28239a8d.html" title="面向对象">面向对象</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
diff --git "a/tags/\351\242\204\350\247\243\346\236\220/index.html" "b/tags/\351\242\204\350\247\243\346\236\220/index.html"
index 77da5362..e4723822 100644
--- "a/tags/\351\242\204\350\247\243\346\236\220/index.html"
+++ "b/tags/\351\242\204\350\247\243\346\236\220/index.html"
@@ -40,7 +40,7 @@
   isHome: false,
   isHighlightShrink: false,
   isToc: false,
-  postUpdate: '2024-06-18 16:33:05'
+  postUpdate: '2024-07-03 17:45:24'
 }</script><noscript><style type="text/css">
   #nav {
     opacity: 1
@@ -133,7 +133,7 @@
       }
     }
     detectApple()
-    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">预解析</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 预解析</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/img@main/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://cdn.jsdelivr.net/gh/fsllala/img@main/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/fsllala/default_cover@main/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
+    })(window)</script><link rel="stylesheet" href="/css/onePic.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/wind.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/cat.css"><link rel="stylesheet" href="/css/readPercent.css"><link rel="stylesheet" href="/css/txMap.css"><link rel="stylesheet" href="/css/avator.css"><div id="myscoll"></div><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Forward の Blog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">预解析</h1></div></header><main class="layout" id="content-inner"><div id="tag"><div class="article-sort-title">标签 - 预解析</div><div class="article-sort"><div class="article-sort-item year">2022</div><div class="article-sort-item"><a class="article-sort-item-img" href="/articles/31c1f94e.html" title="预解析"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_35.webp" alt="预解析" onerror="this.onerror=null;this.src='/img/404.jpg'"></a><div class="article-sort-item-info"><div class="article-sort-item-time"><i class="far fa-calendar-alt"></i><time class="post-meta-date-created" datetime="2022-02-01T12:19:07.000Z" title="发表于 2022-02-01 20:19:07">2022-02-01</time></div><a class="article-sort-item-title" href="/articles/31c1f94e.html" title="预解析">预解析</a></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="author_top is-center"><div class="avatar-img"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://img.fsllala.top/1656236729350avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Forward</div><div class="author-info__description">记录一些知识点🥝</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">45</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">51</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/fsllala"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/fsllala" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://gitee.com/fsllala" target="_blank" title="Gitee"><i class="fa-brands fa-git-square"></i></a><a class="social-icon" href="mailto:1779318132@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/articles/b9f20a20.html" title="webpack"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_64.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack"/></a><div class="content"><a class="title" href="/articles/b9f20a20.html" title="webpack">webpack</a><time datetime="2024-01-03T12:15:07.000Z" title="发表于 2024-01-03 20:15:07">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/fa0f2f9c.html" title="网络安全修改"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_57.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="网络安全修改"/></a><div class="content"><a class="title" href="/articles/fa0f2f9c.html" title="网络安全修改">网络安全修改</a><time datetime="2023-11-09T10:23:04.000Z" title="发表于 2023-11-09 18:23:04">2023-11-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/5157567c.html" title="Koa2实战"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_45.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa2实战"/></a><div class="content"><a class="title" href="/articles/5157567c.html" title="Koa2实战">Koa2实战</a><time datetime="2023-10-28T02:23:04.000Z" title="发表于 2023-10-28 10:23:04">2023-10-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/65b69107.html" title="Nginx"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_43.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Nginx"/></a><div class="content"><a class="title" href="/articles/65b69107.html" title="Nginx">Nginx</a><time datetime="2023-08-24T02:00:03.000Z" title="发表于 2023-08-24 10:00:03">2023-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/articles/3ef665a6.html" title="https"><img src= "https://img.fsllala.top/loading.gif" data-lazy-src="https://cover.fsllala.top/default_cover_40.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="https"/></a><div class="content"><a class="title" href="/articles/3ef665a6.html" title="https">https</a><time datetime="2023-04-26T01:55:37.000Z" title="发表于 2023-04-26 09:55:37">2023-04-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
             <i class="fas fa-folder-open"></i>
             <span>分类</span>
             <a class="card-more-btn" href="/categories/" title="查看更多">
@@ -141,8 +141,8 @@
             </div>
             <ul class="card-category-list" id="aside-cat-list">
             <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Echarts/"><span class="card-category-list-name">Echarts</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">18</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/"><span class="card-category-list-name">Blob</span><span class="card-category-list-count">1</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Blob/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/"><span class="card-category-list-name">文件下载</span><span class="card-category-list-count">1</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom/"><span class="card-category-list-name">Dom</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/"><span class="card-category-list-name">Dom尺寸与位置</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/EventLoop/"><span class="card-category-list-name">EventLoop</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/JSON-stringify-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%BC%8A%E7%AB%AF/"><span class="card-category-list-name">JSON.stringify 深拷贝弊端</span><span class="card-category-list-count">1</span></a></li></ul></li>
-            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(36, 33, 141)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(3, 114, 73)">Dom尺寸与位置</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(161, 196, 168)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(40, 22, 108)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(102, 162, 146)">NodeJs</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(139, 21, 88)">Echarts</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(75, 198, 188)">PhotoShop</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(107, 45, 149)">mysql</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(136, 94, 184)">TypeScript</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(61, 50, 186)">快捷键</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(63, 101, 73)">Vue3 watch</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(170, 15, 104)">Vue2与3响应式原理</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(3, 113, 16)">Vue3</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(74, 60, 105)">Vue3 Suspense</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(154, 63, 91)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(148, 151, 146)">Vue3响应式数据</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(136, 68, 70)">Vue3 hook</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(60, 117, 7)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(177, 139, 66)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(34, 130, 123)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(188, 183, 106)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(188, 49, 13)">https</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(146, 40, 84)">NodeJs内置模块</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(78, 28, 151)">Nginx</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(3, 31, 129)">NodeJs服务器</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(71, 42, 52)">NodeJs Koa2</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(184, 89, 189)">NodeJs Express</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(135, 160, 166)">nvm</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(82, 21, 116)">深拷贝</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(12, 17, 27)">webpack</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(175, 37, 9)">this指向</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(24, 150, 161)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(106, 8, 48)">原型链</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(62, 148, 50)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(100, 80, 60)">心跳重连机制</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(54, 190, 196)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(100, 46, 55)">vbs</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(41, 141, 82)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(33, 42, 186)">async await</a><a href="/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/" style="font-size: 1.15em; color: rgb(47, 9, 68)">图片懒加载</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
-    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-06-18T08:33:05.158Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
+            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Dom/" style="font-size: 1.15em; color: rgb(17, 10, 92)">Dom</a><a href="/tags/Dom%E5%B0%BA%E5%AF%B8%E4%B8%8E%E4%BD%8D%E7%BD%AE/" style="font-size: 1.15em; color: rgb(187, 3, 1)">Dom尺寸与位置</a><a href="/tags/Echarts/" style="font-size: 1.15em; color: rgb(157, 124, 157)">Echarts</a><a href="/tags/%E5%AE%8F%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(179, 67, 157)">宏任务</a><a href="/tags/%E5%BE%AE%E4%BB%BB%E5%8A%A1/" style="font-size: 1.15em; color: rgb(158, 193, 33)">微任务</a><a href="/tags/NodeJs/" style="font-size: 1.45em; color: rgb(89, 195, 174)">NodeJs</a><a href="/tags/mysql/" style="font-size: 1.15em; color: rgb(50, 125, 116)">mysql</a><a href="/tags/PhotoShop/" style="font-size: 1.15em; color: rgb(66, 13, 169)">PhotoShop</a><a href="/tags/%E5%BF%AB%E6%8D%B7%E9%94%AE/" style="font-size: 1.15em; color: rgb(93, 58, 171)">快捷键</a><a href="/tags/TypeScript/" style="font-size: 1.15em; color: rgb(130, 175, 164)">TypeScript</a><a href="/tags/Vue2%E4%B8%8E3%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" style="font-size: 1.15em; color: rgb(195, 30, 133)">Vue2与3响应式原理</a><a href="/tags/Vue3-watch/" style="font-size: 1.15em; color: rgb(156, 150, 106)">Vue3 watch</a><a href="/tags/Vue3-Suspense/" style="font-size: 1.15em; color: rgb(151, 78, 145)">Vue3 Suspense</a><a href="/tags/Vue3/" style="font-size: 1.15em; color: rgb(158, 127, 126)">Vue3</a><a href="/tags/Vue3-hook/" style="font-size: 1.15em; color: rgb(80, 38, 128)">Vue3 hook</a><a href="/tags/Vue3-provide%E4%B8%8Einject/" style="font-size: 1.15em; color: rgb(9, 101, 140)">Vue3 provide与inject</a><a href="/tags/Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE/" style="font-size: 1.15em; color: rgb(125, 7, 121)">Vue3响应式数据</a><a href="/tags/Vue3-setup%E5%8F%82%E6%95%B0/" style="font-size: 1.15em; color: rgb(130, 36, 152)">Vue3 setup参数</a><a href="/tags/JS/" style="font-size: 1.3em; color: rgb(30, 140, 38)">JS</a><a href="/tags/Blob/" style="font-size: 1.15em; color: rgb(56, 190, 33)">Blob</a><a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/" style="font-size: 1.15em; color: rgb(105, 108, 128)">文件下载</a><a href="/tags/https/" style="font-size: 1.15em; color: rgb(181, 181, 78)">https</a><a href="/tags/NodeJs-Koa2/" style="font-size: 1.3em; color: rgb(123, 186, 6)">NodeJs Koa2</a><a href="/tags/Nginx/" style="font-size: 1.15em; color: rgb(85, 84, 89)">Nginx</a><a href="/tags/NodeJs%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97/" style="font-size: 1.15em; color: rgb(177, 63, 73)">NodeJs内置模块</a><a href="/tags/NodeJs%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 1.15em; color: rgb(59, 79, 8)">NodeJs服务器</a><a href="/tags/NodeJs-Express/" style="font-size: 1.3em; color: rgb(167, 198, 5)">NodeJs Express</a><a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 1.15em; color: rgb(123, 83, 87)">深拷贝</a><a href="/tags/websocket/" style="font-size: 1.15em; color: rgb(113, 67, 150)">websocket</a><a href="/tags/%E5%BF%83%E8%B7%B3%E9%87%8D%E8%BF%9E%E6%9C%BA%E5%88%B6/" style="font-size: 1.15em; color: rgb(187, 121, 46)">心跳重连机制</a><a href="/tags/this%E6%8C%87%E5%90%91/" style="font-size: 1.15em; color: rgb(155, 142, 105)">this指向</a><a href="/tags/webpack/" style="font-size: 1.15em; color: rgb(45, 96, 62)">webpack</a><a href="/tags/nvm/" style="font-size: 1.15em; color: rgb(128, 60, 200)">nvm</a><a href="/tags/promise/" style="font-size: 1.15em; color: rgb(25, 23, 93)">promise</a><a href="/tags/async-await/" style="font-size: 1.15em; color: rgb(158, 9, 22)">async await</a><a href="/tags/bat/" style="font-size: 1.15em; color: rgb(17, 116, 155)">bat</a><a href="/tags/vbs/" style="font-size: 1.15em; color: rgb(195, 47, 59)">vbs</a><a href="/tags/%E5%8E%9F%E5%9E%8B/" style="font-size: 1.15em; color: rgb(114, 166, 93)">原型</a><a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 1.15em; color: rgb(188, 133, 0)">原型链</a><a href="/tags/%E6%8B%96%E6%8B%BD/" style="font-size: 1.15em; color: rgb(41, 31, 80)">拖拽</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
+    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/11/"><span class="card-archive-list-date">十一月 2022</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">45</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">131.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-07-03T09:45:23.451Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By Forward</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0</span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://vercel.fsllala.top/js/fancybox.umd.min.js"></script><script src="https://vercel.fsllala.top/js/lazyload.iife.min.js"></script><script>function panguFn () {
   if (typeof pangu === 'object') pangu.autoSpacingPage()
   else {
     getScript('https://vercel.fsllala.top/js/pangu.min.js')
